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

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

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


当前回答

在React中使用map是迭代数组的最佳实践。

为了防止ES6出现一些错误,React中使用了如下语法映射:

<tbody>
    {items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>

在这里,您调用一个组件<ObjectRow/>,因此不需要在箭头后面加括号。

但你也可以这样做:

{items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
))}

Or:

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果在箭头后面加上括号“{}”,React将不会抛出错误,并显示白名单。

其他回答

JSX内部有多种循环方式

使用for循环函数TableBodyForLoop(props){常量行=[];//创建数组以存储tr列表for(设i=0;i<props.people.length;i++){const person=道具.人物[i];//将tr推到数组,关键是行.推(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>);}//返回tbody内的行return<tbody>{rows}</tbody>;}使用ES6阵列映射方法函数TableBody(props){返回(<tbody>{props.people.map(person=>(<tr key={person.id}><td>{person.id}</td><td>{人名}</td></tr>))}</tbody>);}

完整示例:https://codesandbox.io/s/cocky-meitner-yztif

以下React文档将有所帮助

列表和键条件渲染

使用地图功能。

<tbody> 
   {objects.map((object, i) =>  <ObjectRow obj={object} key={i} />)} 
</tbody>
return (
    <table>
       <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
       </tbody>
    </table>
);

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

<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>
const numrows = [1, 2, 3, 4, 5];

cosnt renderRows = () => {
    return numros.map((itm,index) => <td key={index}>{itm}</td>)
}

return <table>
    ............
    <tr>
        {renderRows()}
    </tr>
</table>