如何使用 React 呈现对象列表

Question

[{"id":8,"name":"christoph","age":32,"number":"555-555-5555"},
{"id":9,"name":"debra","age":31,"number":"555-555-5555"},
{"id":10,"name":"eric","age":29,"number":"555-555-5555"},
{"id":19,"name":"richard","age":20,"number":"555-555-5555"},
{"id":14,"name":"santiago","age":25,"number":"(555)555-5555"}]

这里是后端开发人员。（做一个快速而草率的项目所以请原谅我问一个 n00b 问题）

我需要使用 React 以 Table 格式呈现它。

我查看了一些这样的例子 codepen 但没有帮助。任何人都可以指导我使用 Codepen 或我可以研究的入门项目来完成这项工作吗？我无法弄清楚如何映射数组的对象。

Answer 1

您可以参考 React.JS 的文档 link

但是对于您的情况，如果您想将对象数组呈现为 table，您可以使用 jsx 中的 map 数组原型来实现。

const persons = [
  { id: 8, name: "christoph", age: 32, number: "555-555-5555" },
  { id: 9, name: "debra", age: 31, number: "555-555-5555" },
  { id: 10, name: "eric", age: 29, number: "555-555-5555" },
  { id: 19, name: "richard", age: 20, number: "555-555-5555" },
  { id: 14, name: "santiago", age: 25, number: "(555)555-5555" },
]

return (
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Number</th>
      </tr>
    </thead>
    <tbody>
      {persons.map(person => (
        <tr key={person.id}>
          <th scope="row">{person.id}</th>
          <td>{person.name}</td>
          <td>{person.age}</td>
          <td>{person.number}</td>
        </tr>
      ))}
    </tbody>
  </table>
)

我认为这应该可行。

如何使用 React 呈现对象列表

How to render a list of objects using React

javascript

render

reactjs

codepen