使用 react 组件显示表格 - 这是显示表格的正确方法吗?

Question

我试图创建一个非常基本的引导表视图并使用本地状态值显示行。

我只是想了解这是否是在 react 中显示表格的正确方法.

Row Component 
```import React, { Component } from "react";
class Human extends Component {
  render() {
    const { humans } = this.props;
    return humans.map(human => {
      return (
        <tr>
          <th scope="row">{human.id}</th>
          <td>{human.name}</td>
          <td>{human.designation}</td>
        </tr>
      );
    });
  }
}
export default Human;
```
import React, { Component } from "react";
import Human from "./human";
class HumanListing extends Component {
  state = {
    humans: [
      {
        id: 1,
        name: "titus",
        designation: "main"
      },
      {
        id: 2,
        name: "titus2",
        designation: "main2"
      }
    ]
  };
  render() {
    const { humans } = this.state;
    return (
      <table className="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
          </tr>
        </thead>
        <tbody>
          <Human humans={humans} />
        </tbody>
      </table>
    );
  }
}
export default HumanListing;
```

没有任何错误消息，除此之外，我收到一条警告消息，提到每个列表值都必须包含键

Answer 1

当你映射一个项目时，需要分配键

return humans.map((human,key) => {
  return (
    <tr key={key}>
      <th scope="row">{human.id}</th>
      <td>{human.name}</td>
      <td>{human.designation}</td>
    </tr>
  );
});

我认为表格对你来说很好，但我不确定类Human也许HumanRows更适合，因为该类返回一行表。 这是我的意见，当然有很多方法可以做同样的事情，但你的看起来不错。