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

如果对.map（）没有任何内容，可以使用Array.from（）和map函数来重复元素：

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

你必须用JSX写：

<tbody>
    {
        objects.map((object, i) => (
            <ObjectRow obj={object} key={i} />
        ));
    }
</tbody>

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

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

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

如果您习惯于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开发工具：

我用它就像

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

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