面试题：Solid.js 中如何实现动态控制组件显示与隐藏的基本条件渲染

Question

在 Solid.js 项目中，假设有一个按钮和一个组件，点击按钮时需要动态控制该组件的显示与隐藏，请描述实现思路并给出核心代码片段。

Answer 1

实现思路

1. 在组件内部使用 createSignal 创建一个信号（signal）来存储组件显示或隐藏的状态。
2. 将按钮的点击事件与修改该信号状态的函数绑定。
3. 根据信号的状态来决定组件是否渲染。

核心代码片段

import { createSignal } from 'solid-js';

function App() {
  const [isComponentVisible, setIsComponentVisible] = createSignal(true);

  const toggleComponent = () => {
    setIsComponentVisible(!isComponentVisible());
  };

  return (
    <div>
      <button onClick={toggleComponent}>
        {isComponentVisible() ? '隐藏组件' : '显示组件'}
      </button>
      {isComponentVisible() && <YourComponent />}
    </div>
  );
}

function YourComponent() {
  return (
    <div>
      这是要显示或隐藏的组件内容
    </div>
  );
}