在 React JSX 中循环

一尘不染

在 React JSX 中循环

javascript

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

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

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

阅读 176

2022-02-19

共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 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 的工作原理。

2022-02-19