在Reactjs中递归构建数组

import React from 'react';

const MenuItem = ({ title, subMenu }) => {
  return (
    <li>
      {title}
      {subMenu && (
        <ul>
          {subMenu.map((item) => (
            <MenuItem key={item.id} {...item} />
          ))}
        </ul>
      )}
    </li>
  );
};

const Menu = ({ menuItems }) => {
  return (
    <ul>
      {menuItems.map((item) => (
        <MenuItem key={item.id} {...item} />
      ))}
    </ul>
  );
};

const App = () => {
  const menuItems = [
    {
      id: 1,
      title: 'Item 1',
      subMenu: [
        {
          id: 2,
          title: 'Sub Item 1',
        },
        {
          id: 3,
          title: 'Sub Item 2',
          subMenu: [
            {
              id: 4,
              title: 'Sub Sub Item 1',
            },
          ],
        },
      ],
    },
    {
      id: 5,
      title: 'Item 2',
    },
  ];

  return <Menu menuItems={menuItems} />;
};

export default App;