面试题：Solid.js 中如何实现条件渲染

Question

在Solid.js中，描述至少两种实现条件渲染的方式，并举例说明在不同场景下如何选择合适的方式。

Answer 1

方式一：Show 指令

• 说明：Show 指令用于根据条件来决定是否渲染一个元素或组件。它类似于其他框架中的 v-if。
• 示例：

import { Show } from 'solid-js';

function App() {
  const isLoggedIn = true;
  return (
    <div>
      <Show when={isLoggedIn}>
        <p>欢迎，用户！</p>
      </Show>
    </div>
  );
}

• 适用场景：适用于简单的条件渲染，当条件为 false 时，被包裹的元素或组件不会在 DOM 中存在，适合需要完全移除某个元素或组件的场景，比如根据用户登录状态显示不同内容。

方式二：三元运算符

• 说明：通过三元运算符在 JSX 中进行条件渲染，这是一种非常直观且简洁的方式。
• 示例：

import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      {count() > 5? <p>计数大于5</p> : <p>计数小于等于5</p>}
    </div>
  );
}

• 适用场景：适用于简单逻辑的条件渲染，代码简洁明了。特别是在需要在同一层级根据条件渲染不同元素的场景，如根据某个数值判断显示不同文本。