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。

ReactDOM 从数组动态渲染组件

2 个答案: