在React中使用map是迭代数组的最佳实践。

为了防止ES6出现一些错误，React中使用了如下语法映射：

<tbody>
    {items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>

在这里，您调用一个组件＜ObjectRow/＞，因此不需要在箭头后面加括号。

但你也可以这样做：

{items.map((item, index) => (
    <ObjectRow key={index} name={item.name} />
))}

Or:

{items.map((item, index) => {
    // Here you can log 'item'
    return (
        <ObjectRow key={index} name={item.name} />
    )
})}

我这么说是因为如果在箭头后面加上括号“｛｝”，React将不会抛出错误，并显示白名单。

您可以创建如下新组件：

将键和数据传递给ObjectRow组件，如下所示：

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

创建新组件ObjectRowList，使其充当数据的容器：

export const ObjectRowList = (objectRows) => {
    return (
      <tbody>
        {objectRows.map((row, index) => (
          <ObjectRow key={index} data={row} />
        ))}
      </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开发工具：

随着时间的推移，语言越来越成熟，我们经常会遇到这样的常见问题。问题是循环组件“n”次。

{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}

其中，n-是要循环的次数。项将未定义，索引将照常。此外，ESLint不鼓励使用数组索引作为键。

但是，您的优点是不需要在之前初始化数组，最重要的是避免了for循环。。。

为了避免项目未定义带来的不便，您可以使用_，这样在进行linting时就会忽略它，并且不会引发任何linting错误，例如

{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}

如果您真的想在JSX中使用for循环，可以使用IIFE。

<tbody>
  {
    (function () {
      const view = [];
      for (let i = 0; i < numrows; i++) {
        view.push(<ObjectRow key={i}/>);
      }
      return view;
    }())
  }
</tbody>

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

[{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>