react antdesign5 menus多级实现

Ant Design 5 的 Menu 组件默认支持多级菜单的实现，只需要在 Menu.Item 或者 Menu.SubMenu 组件中再嵌套一个 Menu 组件即可。

以下是一个两级菜单的示例代码：

import { Menu } from 'antd';

const { SubMenu } = Menu;

function App() {
  return (
    <Menu mode="inline">
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
      <SubMenu key="sub1" title="Submenu">
        <Menu.Item key="3">Option 3</Menu.Item>
        <Menu.Item key="4">Option 4</Menu.Item>
        <SubMenu key="sub2" title="Submenu">
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
        </SubMenu>
      </SubMenu>
    </Menu>
  );
}

export default App;

在这个示例中，SubMenu 组件包裹了两个 Menu.Item 组件和一个嵌套的 SubMenu 组件，实现了一个两级菜单的效果。

如果需要更多级别的菜单，只需要在 SubMenu 组件中再嵌套一个 Menu 组件即可。同时，可以设置 Menu 组件的 mode 属性来控制菜单的展示方式。在上面的示例中，mode 属性被设置为 "inline"，表示菜单以垂直方向的方式展示。如果需要水平方向展示，可以将 mode 属性设置为 "horizontal"。