面试题：Solid.js 中 JSX 与响应式数据结合

Question

在 Solid.js 中，使用 JSX 构建一个计数器组件。该组件不仅要能显示当前计数数值，还要有两个按钮，一个用于增加计数，一个用于减少计数。当计数为偶数时，组件背景颜色显示为绿色；当计数为奇数时，背景颜色显示为红色。请详细说明如何利用 Solid.js 的响应式系统与 JSX 语法实现这一功能，并给出完整代码。

Answer 1

1. 利用 Solid.js 响应式系统与 JSX 实现原理：

   • 在 Solid.js 中，使用 createSignal 创建响应式状态。createSignal 会返回一个数组，第一个元素是获取状态值的函数，第二个元素是更新状态值的函数。
   • 对于按钮的点击事件，通过调用更新状态的函数来增加或减少计数。
   • 根据计数数值的奇偶性，通过 CSS 样式动态改变组件的背景颜色。在 JSX 中，可以通过 style 属性来设置内联样式。

2. 完整代码如下：

import { createSignal } from'solid-js';

const Counter = () => {
    const [count, setCount] = createSignal(0);

    const increment = () => setCount(count() + 1);
    const decrement = () => setCount(count() - 1);

    const backgroundColor = count() % 2 === 0? 'green' :'red';

    return (
        <div style={{ backgroundColor, padding: '20px' }}>
            <p>Count: {count()}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
};

export default Counter;