React JSX内部回路

我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：

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

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

当前回答

我用它就像

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

其他回答

您可以在React for循环中使用.map（）。

<tbody>
    { newArray.map(() => <ObjectRow />) }
</tbody>

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

在映射中包含JSX内容可能是笨拙的语法。相反，您可以这样做：

const ObjectRow = ({ ... }) => <tr key={}>...</tr>

const TableBody = ({ objects }) => {
  return <tbody>{objects.map(ObjectRow)}</tbody>;
}

这是

{ objects.map(object => ObjectRow(object))

如果将ObjectRow设置为使用对象中的相同键，这将非常有用。

注意-渲染ObjectRow时可能需要设置关键点属性。它不能通过函数调用传入。

更多注释-我遇到过一些地方，这种技术是个坏主意。例如，它不会通过正常的创建组件路径，也不会默认属性值，所以要小心。尽管如此，了解它很方便，有时也很有用。

如果numrows是一个数组，那么最好的方法就是map方法。如果不是，并且您只能从JSX访问它，您也可以使用以下ES6方法：

<tbody>
    {
      [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
    }
</tbody>

你当然可以按照另一个答案的建议用.map来解决。如果您已经使用了Babel，可以考虑使用jsx控制语句。

它们需要一些设置，但我认为在可读性方面是值得的（特别是对于非React开发人员）。如果使用linter，还有eslint-plugin-jsx控制语句。

推荐文章