React JSX 内部的循环

javascript reactjs jsx

2022-08-29 21:57:47

我试图在 React JSX 中做一些类似的事情（其中 ObjectRow 是一个单独的组件）：

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

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

答案 1

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

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

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

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

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

答案 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>