在React JSX内部循环

小编典典

在React JSX内部循环

reactjs

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

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

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

阅读 428

2020-07-22

共1个答案

小编典典

就像您只是在调用JavaScript函数一样。您不能使用for循环来调用函数的参数：

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

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

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

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

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

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add 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的工作方式。

2020-07-22