在 React JSX 中循环

新手上路,请多包涵

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

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

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

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

阅读 1k
2 个回答

把它想象成你只是在调用 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 许可协议

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

如果这是带有 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题