面试题：Solid.js 中 JSX 的条件渲染技巧

Question

在 Solid.js 项目里，假设你有一个布尔变量 `isLoggedIn`，用来判断用户是否登录。当用户登录时，需要在 JSX 中显示欢迎信息及一个登出按钮；未登录时，显示登录和注册按钮。请写出对应的 JSX 代码实现。

Answer 1

import { createSignal } from 'solid-js';

const [isLoggedIn, setIsLoggedIn] = createSignal(false);

// 模拟登录逻辑
const handleLogin = () => {
    setIsLoggedIn(true);
};

// 模拟登出逻辑
const handleLogout = () => {
    setIsLoggedIn(false);
};

const App = () => {
    return (
        <div>
            {isLoggedIn() ? (
                <>
                    <p>欢迎您！</p>
                    <button onClick={handleLogout}>登出</button>
                </>
            ) : (
                <>
                    <button onClick={handleLogin}>登录</button>
                    <button>注册</button>
                </>
            )}
        </div>
    );
};

export default App;