javascript - 如何在 React 中正确编写表格映射列表？

Question

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

示例 map 数据:

[{"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>
  );
}