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，因为该类返回了一行表。我的看法是当然，有很多方法可以做相同的事情，但是您看起来不错。

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

1 个答案: