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在您想要更改现有数组的内容而不返回新数组时非常有用。在， 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区分它们。你可以在React文档中找到更多关于为什么这很重要的信息。