JSX元素的数组未在第二个循环中呈现

Question

我有一个固体。JS代码，看起来像这样：

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

const Text = () => <div style="color: red">Example</div>;

const App = () => {
  const elements = [<Text/>, <Text/>, <Text/>];

  return (
    <div>
      <div>First For Each</div>
      <For each={elements}>{(E) => E}</For>

      <div>Second For Each</div>
      <For each={elements}>{(E) => E}</For>
    </div>
  );
}

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

但是出于某种原因，solid.js仅呈现第二个＆lt; for＆gt; ：

，当我更改 elements to：

const elements = [() => <Text/>, () => <Text/>, () => <Text/>];

它渲染两次（如果我将 elements 值更改为诸如int或string之类的原始值，也可以正常工作。有人可以向我解释为什么solid.js以这种方式行为？

Answer 1

编写＆lt; text/＆gt; 执行返回实际DOM节点的文本组件。 DOM节点只能插入DOM中的一个位置。

将组件执行与函数包裹执行的尝试有效，因为每次执行该函数时，您都会获得不同的元素实例。您基本上是创建组件和HTML元素数组的数组。

这是一个类似的GitHub问题： https://github.com/solidjs/solidjs/solidjs/solid/solid/solid/solid/899