ReactDOM 从数组中动态渲染组件

Question

我希望我的RenderDOM 为数组中找到的每个对象呈现一个组件。我正在用 JSX 构建渲染，我的代码如下：

ReactDOM.render((
            <div className="container container-collapsed">
                <Actions Units={aUnits} />
                <div className="units-wrapper">
                    {
                        aUnits.forEach(u=> {
                            return <Unit unit={u} />
                        })
                    }
                </div>
            </div>
        ), document.getElementById("root"));

我加速输出是这样的：

<div class="container container-collapsed">
    <div class="actions-panel_true"></div>
    <div class="units-wrapper">
        <div class="unit1"></div>
        <div class="unit2"></div>
        <div class="unit3"></div>
    </div>
</div>

相反，我得到：

<div class="container container-collapsed">
    <div class="actions-panel_true"></div>
    <div class="units-wrapper"><div>
</div>

我知道我的 foreach 正在工作，我对其进行了调试。但它并没有像我预期的那样每个单元构建一个 JSX。如何让这个 foreach 循环为我的数组中的每个对象返回一个组件，返回到我要渲染的 JSX？

Answer 1

您需要.map 而不是.forEach 来返回一个数组，以便React 可以有效地呈现它。

同样从.forEach 内部的回调返回没有用，因为.forEach 不返回数组。它返回undefined。

.forEach 在您想要更改现有数组的内容而不返回新数组时很有用。在 React 中，JSX 需要一个数组作为 .map 操作的结果。

@zhulien 还涵盖了更多有效点

Answer 2

应该这样做：

ReactDOM.render((
   <div className="container container-collapsed">
      <Actions Units={aUnits} />
      <div className="units-wrapper">
         {aUnits.map(unit => {
            return (
               <Unit key={u.key} unit={u} />
            );
         })}
       </div>
   </div>
), document.getElementById("root"));

几个注意事项：

<Unit={u} />

不是有效的语法。您应该将u 分配给Unit 组件的属性，而不是组件本身。此外，在渲染项目数组时，您应该为每个项目提供 key 属性，以帮助 React 区分它们。你会发现更多关于为什么这很重要的信息In the React docs。