SolidJS：对于子组件不渲染列表

Question

我有一个父组件返回：

<List list={list()}>
    {(item, index) => <div>{item}</div>}
</List>

其中 list 是创建的信号。 List 是我返回的自定义组件：

<div>
    <For each={list}>{children}</For>
</div>

但每当 list 更新时，它都不会呈现。当我将 For 代码移动到父级时，它会呈现，那么将信号的值传递给子组件使其不会在更新时重新呈现是什么意思？

编辑：demo

import { render } from "solid-js/web";
import { createSignal, For } from "solid-js";

function Counter() {
  const [list, setList] = createSignal([]);
  const increment = () => setList([...list(), 1]);

  return (
    <>
      <button type="button" onClick={increment}>
        add
      </button>
      <p>broken list</p>
      <List list={list()} />

      <p>other list</p>
      <For each={list()}>
        {(item) => <p>{item}</p>}
      </For>
    </>
  );
}

function List({list}) {
  return (
    <For each={list}>
      {(item) => <p>{item}</p>}
    </For>
  );
}

render(() => <Counter />, document.getElementById("app"));

编辑 2：我打算使用 <List list={list()} />，它也不起作用，但我之前错过了它。

Answer 1

它不起作用，因为解构 props 在 Solid 中失去反应性，也就是说，所有解构的道具值永远不会更新。

解构 props 有时很方便并且常用于其他框架，但在 Solid 中并不真正推荐 - FAQ 说：

By destructuring, you separate the value from the object, giving you the value at that point in time and losing reactivity.

您需要重写 List 组件以使用单个 props 参数并在 JSX 中访问 props.list：

function List(props) {
  return (
    <For each={props.list}>
      {(item) => <p>{item}</p>}
    </For>
  );
}

为什么解构不起作用？在 Solid 中，props 是一个对象，由 Solid 在幕后创建，带有用于拦截对每个个体属性的访问的 getter，如 props.something。它需要跟踪 JSX（表达式和片段）和效果（由 createEffect() 创建），以便在 props.something 更改时重新评估和更新它们。无法跟踪对已解构属性的访问（当然有 plugin for that，但它不在核心框架中，因为它有一些开销）。

SolidJS：对于子组件不渲染列表

SolidJS: For in child component not rendering list

solid-js