我试图在React JSX（其中ObjectRow是一个单独的组件）中执行以下操作：
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX，因为JSX映射到函数调用。然而，由于来自模板领域，而且是JSX的新手，我不确定如何实现上述目标（多次添加组件）。
当前回答
我倾向于采用编程逻辑发生在render返回值之外的方法。这有助于保持实际呈现的内容易于理解。
所以我可能会做一些类似的事情：
import _ from 'lodash';
...
const TableBody = ({ objects }) => {
const objectRows = objects.map(obj => <ObjectRow object={obj} />);
return <tbody>{objectRows}</tbody>;
}
诚然，这是一个很小的代码量，内联它可能会很好。
其他回答
下面的代码将帮助您通过传递唯一的密钥道具在JSX中创建循环
import React, { Children, Fragment } from 'react';
export const ObjectRow = ({ data }) => (
<div>
<Fragment>{data}</Fragment>
</div>
);
/** Wrapping your list inside React.Children.toArray allows you to not
pass unique key props.
It will be dynamically generated from Virtual Dom to Real Dom */
export const ObjectRowListComponent = (objectRows) => (
<tbody>
{Children.toArray(objectRows.map((row) => <ObjectRow data={row} />))}
</tbody>
);
您可以从numRows创建数组并映射它
像这样的东西：
<tbody>
{Array.from({ length: numrows }).map((_,i)=><ObjectRow key={i}/>)
</tbody>
您只能在JSX元素中编写JavaScript表达式，因此for循环无法工作。您可以先将元素转换为数组，然后使用map函数渲染它：
<tbody>
{[...new Array(numrows)].map((e) => (
<ObjectRow/>
))}
</tbody>
您的JSX代码将编译成纯JavaScript代码，任何标记都将被ReactElement对象替换。在JavaScript中，不能多次调用函数来收集返回的变量。
这是非法的，唯一的方法是使用数组来存储函数返回的变量。
或者您可以使用Array.prototype.map来处理这种情况，Array.prototype.map自JavaScriptES5以来就可用。
也许我们可以编写其他编译器来重新创建一个新的JSX语法来实现一个repeat函数，就像Angular的ng repeat一样。
随着时间的推移，语言越来越成熟，我们经常会遇到这样的常见问题。问题是循环组件“n”次。
{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}
其中，n-是要循环的次数。项将未定义，索引将照常。此外，ESLint不鼓励使用数组索引作为键。
但是，您的优点是不需要在之前初始化数组，最重要的是避免了for循环。。。
为了避免项目未定义带来的不便，您可以使用_，这样在进行linting时就会忽略它，并且不会引发任何linting错误，例如
{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}
