在 React JSX 中循环

Question

我正在尝试在 React JSX 中执行以下操作（其中 ObjectRow 是一个单独的组件）：

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    }
</tbody>

我意识到并理解为什么这不是有效的 JSX，因为 JSX 映射到函数调用。但是，来自模板领域并且是 JSX 的新手，我不确定如何实现上述目标（多次添加组件）。

原文由 B Robster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

把它想象成你只是在调用 JavaScript 函数。您不能在函数调用的参数所在的地方使用 for 循环：

 return tbody(
 for (let i = 0; i < numrows; i++) {
 ObjectRow()
 }
 )

查看函数 tbody 如何作为参数传递一个 for 循环 - 导致语法错误。

但是您可以创建一个数组，然后将其作为参数传递：

 const rows = [];
 for (let i = 0; i < numrows; i++) {
 rows.push(ObjectRow());
 }
 return tbody(rows);

---

使用 JSX 时，您基本上可以使用相同的结构：

 const rows = [];
 for (let i = 0; i < numrows; i++) {
 // note: we are adding a key prop here to allow react to uniquely identify each
 // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
 rows.push(<ObjectRow key={i} />);
 }
 return <tbody>{rows}</tbody>;

顺便说一句，我的 JavaScript 示例几乎正是 JSX 示例转换成的内容。使用 Babel REPL 来了解 JSX 的工作原理。

原文由 Sophie Alpert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不确定这是否适合您的情况，但 地图 通常是一个很好的答案。

如果这是带有 for 循环的代码：

 <tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

你可以用 map 这样写：

 <tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6语法：

 <tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

原文由 Brigand 发布，翻译遵循 CC BY-SA 4.0 许可协议