如何在React中正确编写表格地图列表？

Question

我已经阅读了教程并遵循了它们，但我似乎还没有完全理解它，然后盯着代码几个小时。有人可以给我一个关于如何在React中使用地图正确编写表格的正确解释吗？

示例地图数据：

[{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}]

我希望它看起来像：

希望你们能帮助我找到一个适当的例子，并对每个部分做出很好的解释，因为我现在仍然对文档感到困惑。感谢。

Answer 1

输出表格的开头，然后在数组上映射内容，然后输出结束。

function MyComponent(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th> <th>Location</th> <th>Description</th>
        </tr>
      </thead>
      <tbody>
        { 
          props.data.map(row => (
            <tr>
              <td>{row.location_id}</td>
              <td>{row.location}</td>
              <td>{row.description}</td>
            </tr>
          )) 
        }
      </tbody>
    </table>
  );
}