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

Question

我有一个 Solid.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 只呈现第二个 <For>:

当我将 elements 更改为：

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

它呈现两次（如果我将 elements 值更改为原始值（如 int 或字符串）也可以正常工作。有人可以向我解释为什么 Solid.js 会这样吗？

Playground Example

Answer 1

写入 <Text/> 执行 returns 实际 DOM 节点的文本组件。并且 dom 个节点只能插入 DOM.

中的一处

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

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

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

Array of JSX Elements not rendering on second loop

solid-js