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

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

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


当前回答

以下是您可以在React中通过迭代对象数组或普通数组实现的可能解决方案

const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
    rows.push(<ObjectRow key={data.id} name={data.name}/>);
});

<tbody>
    { rows }
</tbody>

Or

const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
    rows.push(<ObjectRow key={numrows[i]} />);
};

<tbody>
    { rows }
</tbody>

最近几天,我熟悉的一种更好的迭代对象数组的方法是直接在渲染中使用.map,可以返回也可以不返回:

.map带返回

 const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
     {numrows.map(data=> {
         return <ObjectRow key={data.id} name={data.name}/>
     })}
</tbody>

.map不返回

 const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
     {numrows.map(data=> (
         <ObjectRow key={data.id} name={data.name}/>
     ))}
</tbody>

其他回答

我不确定这是否适用于您的情况,但通常[map][1]是一个很好的答案。

如果这是使用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>

objects.map是进行循环的最佳方式,objects.filter是过滤所需数据的最佳方式。过滤后的数据将形成一个新的数组和对象。some是检查数组是否满足给定条件的最佳方法(它返回布尔值)。

要循环多次并返回,可以通过from和map实现:

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

其中i=次数


如果您想为渲染组件分配唯一的键ID,可以使用React文档中建议的React.Children.toArray

对阵列进行反应

将子级不透明数据结构作为平面数组返回,并为每个子级分配键。如果要在渲染方法中处理子对象的集合,特别是如果要在传递之前对this.props.children进行重新排序或切片,则非常有用。

注:React.Children.toArray()在展平子列表时更改键以保留嵌套数组的语义。也就是说,toArray在返回的数组中给每个键加前缀,以便每个元素的键都被限定到包含它的输入数组中。

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

在渲染或任何函数中,在返回之前,可以使用变量来存储JSX元素。就像这样-

const tbodyContent = [];
for (let i=0; i < numrows; i++) {
    tbodyContent.push(<ObjectRow/>);
}

在身体内部使用它,如下所示:

<tbody>
    {
        tbodyContent
    }
</tbody>

但我更喜欢map()而不是这个。

我用它就像

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

您可以执行以下操作来重复组件numrows次

<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>