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

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

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


当前回答

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

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

其他回答

也许是当今最大开发者的标准,使用这样的结构:

 let data = [
  {
    id: 1,
    name: "name1"
  },
  {
    id: 2,
    name: "name2"
  },
  {
    id: 3,
    name: "name3"
  },
  {
    id: 100,
    name: "another name"
  }
];

export const Row = data => {
  return (
    <tr key={data.id}>
      <td>{data.id}</td>
      <td>{data.name}</td>
    </tr>
  );
};

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>{data.map(item => Row(item))}</tbody>
    </table>
  );
}

在JSX中,在HTML或任何代码中编写JavaScript操作,{data.map(item=>Row(item))},在map函数中使用单花括号。了解更多地图信息。

这里还可以看到以下输出。

这里有一个简单的解决方案。

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

不需要映射和复杂代码。您只需要将行推送到数组并返回值来渲染它。

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

假设您所在的州有一系列项目:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })}
</tbody>

ES2015 Array.from,带有map函数+键

如果对.map()没有任何内容,可以使用Array.from()和map函数来重复元素:

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>