react实现一个简易三级菜单

以下是使用 React 实现一个简易的三级菜单的示例代码：

import React, { useState } from 'react';

const MenuItem = ({ title, subMenu }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSubMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <li>
      <div onClick={toggleSubMenu}>{title}</div>
      {isOpen && (
        <ul>
          {subMenu.map((item, index) => (
            <MenuItem key={index} title={item.title} subMenu={item.subMenu} />
          ))}
        </ul>
      )}
    </li>
  );
};

const Menu = () => {
  const menuData = [
    {
      title: 'Menu 1',
      subMenu: [
        {
          title: 'Submenu 1-1',
          subMenu: [
            {
              title: 'Sub-submenu 1-1-1',
              subMenu: []
            },
            {
              title: 'Sub-submenu 1-1-2',
              subMenu: []
            }
          ]
        },
        {
          title: 'Submenu 1-2',
          subMenu: []
        }
      ]
    },
    {
      title: 'Menu 2',
      subMenu: []
    },
    {
      title: 'Menu 3',
      subMenu: []
    }
  ];

  return (
    <ul>
      {menuData.map((item, index) => (
        <MenuItem key={index} title={item.title} subMenu={item.subMenu} />
      ))}
    </ul>
  );
};

export default Menu;

在上述代码中，我们定义了两个组件：`MenuItem` 和 `Menu`。`MenuItem` 组件负责渲染每个菜单项，包括标题和可能的子菜单。通过使用 `useState` 来管理子菜单的展开与折叠状态。当点击菜单项时，`toggleSubMenu` 函数会切换子菜单的展开状态。

`Menu` 组件作为顶级组件，负责渲染整个菜单。在 `Menu` 组件中，我们传入一个包含菜单数据的数组 `menuData`，并通过 `map` 方法来遍历生成每个菜单项的 `MenuItem` 组件。

通过嵌套使用 `MenuItem` 组件，我们可以实现多级嵌套的菜单结构。每个菜单项都可以包含一个子菜单，从而实现了三级菜单的效果。

注意：上述代码只是一个简易的示例，实际应用中可能需要根据需求进行修改和扩展。