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

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

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


当前回答

这可以通过多种方式实现。

如上所述,在返回之前,存储数组中的所有元素回路内部回路方法1:让容器=[];让arr=[1,2,3]//可以是任何数组、对象arr.forEach((val,索引)=>{容器推送(<div key={index}>值</div>)/*** 1. 所有循环生成的元素都需要密钥* 2. 数组中只能放置一个父元素*例如container.push(*<div key={index}>值</div><div>这将引发错误</div>)**/});返回(<div><div>这里有任何东西</div><div>{container}</div></div>)方法2:返回(<div><div>这里有任何东西</div><div>{(() => {让容器=[];让arr=[1,2,3]//可以是任何数组、对象arr.forEach((val,索引)=>{容器推送(<div key={index}>值</div>)});返回容器;})()}</div></div>)

其他回答

使用地图功能。

<tbody> 
   {objects.map((object, i) =>  <ObjectRow obj={object} key={i} />)} 
</tbody>

我用它就像

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

ECMAScript 2015/Babel可能使用生成器函数创建JSX数组:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

要循环多次并返回,可以通过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>

我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。

所以我可能会做一些类似的事情:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

诚然,这是一个很小的代码量,内联它可能会很好。