面试题：Solid.js 中如何为组件添加局部样式并处理动态类名

Question

在 Solid.js 项目中，假设你有一个组件 `MyComponent`，需要为该组件添加局部样式，并且根据组件内部的一个布尔变量 `isActive` 来动态切换类名，使得 `isActive` 为 `true` 时添加类名 `active - class`，为 `false` 时添加类名 `inactive - class`。请写出实现该功能的代码示例，并解释相关原理。

Answer 1

代码示例

import { createSignal } from 'solid-js';

const MyComponent = () => {
  const [isActive, setIsActive] = createSignal(false);

  const handleClick = () => {
    setIsActive(!isActive());
  };

  return (
    <div className={isActive()? 'active-class' : 'inactive-class'}>
      <button onClick={handleClick}>
        {isActive()? 'Deactivate' : 'Activate'}
      </button>
    </div>
  );
};

export default MyComponent;

原理解释

1. 状态管理：通过 createSignal 函数创建了一个信号 isActive 及其更新函数 setIsActive。信号是 Solid.js 中用于管理状态的核心机制，它可以追踪状态的变化并自动触发依赖于该状态的视图更新。
2. 动态类名：在 div 标签的 className 属性中，使用了三元表达式 isActive()? 'active-class' : 'inactive-class'。这里 isActive() 用于获取当前 isActive 的值，根据这个值来决定添加 active-class 还是 inactive-class 类名。当 isActive 的值发生变化时，className 也会相应改变，从而实现样式的动态切换。
3. 事件处理：handleClick 函数通过调用 setIsActive 来反转 isActive 的值。当按钮被点击时，handleClick 函数被触发，isActive 的值发生变化，进而导致视图中 div 的 className 更新，实现样式的动态切换。