三级菜单react SubMenu

如果你想在 React 中实现一个三级菜单，可以使用 SubMenu 组件来实现。下面是一个简单的示例代码，演示如何使用 Ant Design 的 SubMenu 组件创建一个三级菜单：

import React from 'react';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

class MyMenu extends React.Component {
  render() {
    return (
      <Menu mode="horizontal">
        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="4">Option 4</Menu.Item>
            <Menu.Item key="5">Option 5</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
          <Menu.Item key="6">Option 6</Menu.Item>
          <Menu.Item key="7">Option 7</Menu.Item>
          <Menu.Item key="8">Option 8</Menu.Item>
          <Menu.Item key="9">Option 9</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

export default MyMenu;

在这个示例中，我们使用了 Ant Design 的 Menu 组件和 SubMenu 组件来创建菜单。我们定义了三个一级菜单，分别是 "Navigation One"、"Navigation Two" 和 "Navigation Three"，并通过 title 属性设置它们的标题。在第二个一级菜单中，我们创建了一个二级菜单 "Submenu"，并在其中添加了两个选项。你可以根据自己的需求修改菜单的结构和样式。

请确保你已经安装了 Ant Design 和相关的依赖，然后将上述代码放入你的 React 组件中，即可使用该三级菜单。希望对你有所帮助！如果还有其他问题，请随时提问。