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

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

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


当前回答

如果在JSX中需要JavaScript代码,可以添加{},然后在这些括号中编写JavaScript代码。就这么简单。

同样,您可以在JSX/react中循环。

Say:

<tbody>
    {`your piece of code in JavaScript` }
</tbody>

例子:

<tbody>
    { items.map((item, index) => {
        console.log(item)}) ; // Print item
        return <span>{index}</span>;
    } // Looping using map()
</tbody>

其他回答

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

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

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


简单的方法

您可以将numrows置于状态,并使用map()代替for循环:

{this.state.numrows.map((numrows , index) => {
      return (
        <ObjectRow
          key={index}
        />

您只能在JSX元素中编写JavaScript表达式,因此for循环无法工作。您可以先将元素转换为数组,然后使用map函数渲染它:

<tbody>
    {[...new Array(numrows)].map((e) => (
         <ObjectRow/>
    ))}
</tbody>

你必须用JSX写:

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

您可以从numRows创建数组并映射它

像这样的东西:

        <tbody>
           {Array.from({ length: numrows }).map((_,i)=><ObjectRow key={i}/>)
        </tbody>