嵌套数组 ReactJS 表

在 ReactJS 中，有时候需要展示嵌套的数组数据。这时候我们可以通过表格的形式展示数据，方便用户查看。

以下是一个示例代码片段，用于展示一个嵌套数组数据的表格：

import React from 'react';

const data = [
  {
    name: 'John',
    age: 30,
    addresses: [
      {
        street: '123 Main St',
        city: 'Anytown',
        state: 'CA',
        zip: '12345',
      },
      {
        street: '456 Maple Ave',
        city: 'Everytown',
        state: 'NY',
        zip: '67890',
      },
    ],
  },
  {
    name: 'Jane',
    age: 25,
    addresses: [
      {
        street: '789 Oak St',
        city: 'Somewhere',
        state: 'FL',
        zip: '13579',
      },
    ],
  },
];

const NestedArrayTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Addresses</th>
        </tr>
      </thead>
      <tbody>
        {data.map((person, index) => (
          <tr key={index}>
            <td>{person.name}</td>
            <td>{person.age}</td>
            <td>
              <table>
                <thead>
                  <tr>
                    <th>Street</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zip</th>
                  </tr>
                </thead>
                <tbody>
                  {person.addresses.map((address, index) => (
                    <tr key={index}>
                      <td>{address.street}</td>
                      <td>{address.city}</td>
                      <td>{address.state}</td>
                      <td>{address.zip}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default NestedArrayTable;

该代码使用了嵌套表格的形式，将每个人的信息和地址分别展示在不同的表格中。这样做的好处是可以避免数据混淆，让用户更容易查看和理解数据。

如上述代码所示，在 ReactJS 中展示嵌套数组数据的表格，可以通过两层嵌套的表格来实现。最外层的表格是展示每个人的信息，而内层的表格则是展示每个人的地址。这样做既方便了用户查看数据，也让代码更加清晰易懂。

代码片段中的表格由 table、thead、th、tbody、tr 和 td 六个标签组成。通过嵌套这些标签，我们可以轻松创建出一个嵌套数组数据的表格，并将其放入 ReactJS 应用中。