使用react组件显示表-这是显示表的正确方式吗？

Question

我正在尝试创建一个非常基本的bootstrap表视图，并使用本地状态值显示行。

我只想知道这是否是在react中显示表的正确方式。

Row Component 
```import React, { Component } from "react";

类Human extends组件{

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>

  );

});

}

}

导出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

映射项目时，需要分配key

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，因为该类返回一行表。这是我的观点，当然有很多方法可以做同样的事情，但你的方法看起来很好。