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

 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函数中使用单花括号。了解更多地图信息。

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

它循环通过一组数据，为数据集中的每个项目创建一个新的React组件。这可以使用JavaScript的map（）方法实现。

例如，如果您有一个称为“data”的对象数组和一个名为“ObjectRow”的React组件：

const rows = data.map((item, index) => <ObjectRow key={index} {...item} />);

然后，可以像这样渲染tbody标记中的行：

<tbody>{rows}</tbody>

您可以执行以下操作来重复组件numrows次

<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>

如果您习惯于Angular，并希望采用更像React的方法：

尝试使用这个带有自动哈希和可选trackBy的简单组件，类似于Angular。

用法：

<For items={items}>
    {item => <div>item</div>}
</For>

自定义键/轨迹依据：

<For items={items} trackBy={'name'}>
    {item => <div>item</div>}
</For>

定义：

export default class For<T> extends Component<{ items: T[], trackBy?: keyof T, children: (item: T) => React.ReactElement }, {}> {
    render() {
        return (
            <Fragment>
                {this.props.items.map((item: any, index) => <Fragment key={this.props.trackBy ?? item.id ?? index}>{this.props.children(item)}</Fragment>)}
            </Fragment>
        );
    }
}

React开发工具：

const numrows = [1, 2, 3, 4, 5];

cosnt renderRows = () => {
    return numros.map((itm,index) => <td key={index}>{itm}</td>)
}

return <table>
    ............
    <tr>
        {renderRows()}
    </tr>
</table>

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