SolidJS:用于子组件不呈现列表

Question

我有一个父组件返回：

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

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

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

但是，只要list被更新，它就不会呈现。当我将For代码移动到父组件时，它会呈现，那么如何将信号的值传递给一个子组件，从而使它在更新时不会重新出现呢？

编辑：演示

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

它不能工作，因为在Solid中销毁props会失去反应性，也就是说，所有非结构化支持值都不会更新。

在其他框架中，析构props有时很方便，也很常用，但在Solid中并不是真正推荐的-- 常见问题说：

通过析构，您可以将值从对象中分离出来，在那个时间点给出值，并失去反应性。

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

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

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