Solid.js中组件Props使用表达式时的响应性问题

你遇到的问题核心在于Solid.js的组件执行模型和React完全不同：Solid的组件函数只会执行一次（初始化阶段），而非每次状态变化都重新执行函数。

为什么第一种写法不生效？ #

假设你的Button组件内部是这样写的：

function Button(props) {
  // 这里仅在组件初始化时求值一次
  const isClicked = props.clicked;
  return <button className={isClicked ? "active" : ""} onClick={props.onClick}>
    {props.children}
  </button>;
}

当你点击按钮修改clickedKey时，props.clicked的表达式结果确实变了，但因为Button组件已经初始化完成，isClicked变量不会重新求值，对应的DOM类名自然不会更新。Solid不会自动重新执行组件函数，普通变量无法追踪props的变化。

为什么三元表达式写法能生效？ #

用三元表达式时，clickedKey变化会触发条件分支切换：Solid会销毁之前的Button实例，重新创建新的Button组件。新组件初始化时会重新计算props.clicked的值，所以能拿到最新的状态，表现出响应性。但这种写法是通过销毁重建组件实现的，属于冗余操作，不是最优解。

正确的响应式写法 #

要让Button组件的prop保持响应性，只需确保在响应式上下文中访问props.clicked：

1. 直接在JSX中使用props
   Solid会自动追踪JSX中对props的访问，当依赖变化时仅更新对应的DOM部分：

function Button(props) {
  return <button classList={{ active: props.clicked }} onClick={props.onClick}>
    {props.children}
  </button>;
}

2. 用createMemo推导响应式变量
   如果需要将prop转换为内部变量，用createMemo包裹，确保变量能追踪props的变化：

import { createMemo } from "solid-js";

function Button(props) {
  const isClicked = createMemo(() => props.clicked);
  return <button className={isClicked() ? "active" : ""} onClick={props.onClick}>
    {props.children}
  </button>;
}

内容的提问来源于stack exchange，提问作者star