如何使用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以表格格式呈现它。

我看了一些类似此Codepen的示例，但没有帮助。 谁能指导我完成我可以研究的Codepen或入门项目？ 我不知道如何映射数组的对象。

Answer 1

您可以参考以该链接为参考的React.JS文档

但是对于您的情况，如果要将对象数组呈现为table ，则可以使用jsx map array prototype进行jsx 。

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>
)

我认为这应该有效。