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

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

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


当前回答

不能在JSX中直接使用任何循环或其他额外方法。相反,您可以做的是为其生成单独的函数,并生成循环语句,然后在该函数中返回组件上述代码示例:

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

<tbody>
{renderObjectRow()}
</tbody>


其他回答

您还可以使用自调用函数:

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>

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文档将有所帮助

列表和键条件渲染

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>

以下是React文档中的一个示例,JavaScript表达式作为子项:

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

至于你的情况,我建议你这样写:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

请注意,键非常重要,因为React使用键来区分数组中的数据。

使用地图功能。

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