面试题：Solid.js 中 JSX 条件渲染的基本方式及应用场景

Question

请简述 Solid.js 中 JSX 条件渲染的两种基本方式，并举例说明在什么样的业务场景下会分别使用到这两种方式。

Answer 1

方式一：三元表达式

1. 简述：通过 condition ? valueIfTrue : valueIfFalse 的形式，根据条件判断返回不同的 JSX 内容。
2. 示例：

import { createSignal } from 'solid-js';

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

  return (
    <div>
      {isLoggedIn() ? <p>欢迎，用户已登录</p> : <p>请登录</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn())}>
        {isLoggedIn() ? '退出登录' : '登录'}
      </button>
    </div>
  );
};

export default App;

3. 业务场景：适用于简单的二选一条件判断场景，例如根据用户登录状态显示不同的提示信息或按钮文本。

方式二：逻辑与（&&）运算符

1. 简述：通过 condition && jsxElement 的形式，当条件为 true 时，渲染其后的 JSX 元素；当条件为 false 时，不渲染任何内容。
2. 示例：

import { createSignal } from 'solid-js';

const App = () => {
  const [hasNewMessages, setHasNewMessages] = createSignal(false);

  return (
    <div>
      {hasNewMessages() && <p>您有新消息！</p>}
      <button onClick={() => setHasNewMessages(!hasNewMessages())}>
        {hasNewMessages() ? '标记为已读' : '检查新消息'}
      </button>
    </div>
  );
};

export default App;

3. 业务场景：适用于当某个条件满足时才渲染特定元素的场景，比如根据是否有新消息来显示提示，不需要处理条件不满足时的其他渲染逻辑。