JavaScript:如何将具有嵌套数组的对象映射到React的表

const data = [
  {
    id: 1,
    name: 'Item 1',
    children: [
      { id: 11, name: 'SubItem 1.1' },
      { id: 12, name: 'SubItem 1.2' }
    ]
  },
  {
    id: 2,
    name: 'Item 2',
    children: [
      { id: 21, name: 'SubItem 2.1' },
      { id: 22, name: 'SubItem 2.2', children: [{ id: 221, name: 'SubSubItem 2.2.1' }] }
    ]
  }
];

import React from 'react';

function NestedTable({ data }) {
  return (
    <table>
      <tbody>
        {data.map(item => (
          <React.Fragment key={item.id}>
            <tr>
              <td>{item.name}</td>
            </tr>
            {item.children && (
              <tr>
                <td colSpan="2">
                  <NestedTable data={item.children} />
                </td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
}

export default NestedTable;

import React from 'react';
import NestedTable from './NestedTable';

function App() {
  const data = [
    // ... 同上
  ];

  return (
    <div className="App">
      <NestedTable data={data} />
    </div>
  );
}

export default App;

import React, { memo } from 'react';

const MemoizedNestedTable = memo(NestedTable);

// 在App组件中使用MemoizedNestedTable代替NestedTable