antd菜单组件递归遍历渲染

import React, {
          
    Component } from react
import {
          
    Link } from react-router-dom
import "./menu.less"
import {
          
    menuData } from "@/router/router.js"
import {
          
    Menu } from antd;
const {
          
    SubMenu } = Menu;
export default class Menus extends Component {
          
   
    menuTag = function deep(menuData) {
          
   
        if (menuData && menuData.length > 0) {
          
   
            return menuData.map(item => {
          
   
                if (item.children && item.children.length > 0) {
          
   
                    return (<SubMenu key={
          
   item.path} icon={
          
   item.icon} title={
          
   item.title}>
                        {
          
   deep(item.children)}
                    </SubMenu>)
                }
                return (<Menu.Item key={
          
   item.path} icon={
          
   item.icon}>
                    <Link to={
          
   item.path}>{
          
   item.title}</Link>
                </Menu.Item>)
            })
        }
    }
    render() {
          
   
        return (
            <Menu
                // defaultSelectedKeys={[/home]}
                // defaultOpenKeys={[/components]}
                mode="inline"
                theme="dark"
            >
                {
          
   this.menuTag(menuData)}
            </Menu>
        )
    }
}

路由数据

import React from react
import {
          
   
    HomeOutlined,
    HighlightOutlined,
    BarsOutlined,
    MenuOutlined,
    QqOutlined,
    UsergroupDeleteOutlined,
    WechatOutlined,
    AndroidOutlined,
    AreaChartOutlined,
    UnderlineOutlined,
    AppstoreOutlined,
    EditOutlined,
    AppstoreAddOutlined,
    DragOutlined,
    PlusSquareOutlined,
    OrderedListOutlined
} from @ant-design/icons;
const menuData = [
    {
          
   
        path: /home,
        title: 首页,
        icon: <HomeOutlined />
    },
    {
          
   
        path: /icon,
        title: 图标,
        icon: <UnderlineOutlined />
    },
    {
          
   
        path: /components,
        title: 常用组件,
        icon: <AppstoreOutlined />,
        children: [
            {
          
   
                path: /components/editor,
                title: 富文本,
                icon: <EditOutlined />
            },
            {
          
   
                path: /components/Markdown,
                title: Markdown,
                icon: <HighlightOutlined />
            },

        ]
    },
    {
          
   
        path: /drop,
        title: 拖拽 移动,
        icon: <AppstoreAddOutlined />,
        children: [
            {
          
   
                path: /drop/dialog,
                title: 模态框拖拽,
                icon: <DragOutlined />
            },
            {
          
   
                path: /drop/table,
                title: 表格拖拽,
                icon: <PlusSquareOutlined />
            }
        ]
    },
    {
          
   
        path: /user,
        title: 用户管理,
        icon: <UsergroupDeleteOutlined />,
    },
    {
          
   
        path: /role,
        title: 角色管理,
        icon: <AndroidOutlined />,
    },
    {
          
   
        path: /table,
        title: 表格,
        icon: <OrderedListOutlined />,
    },
    {
          
   
        path: /charts,
        title: 图表,
        icon: <AreaChartOutlined />,
    },
    {
          
   
        path: /menu,
        title: 多级菜单,
        icon: <BarsOutlined />,
        children: [
            {
          
   
                path: /menu/level,
                title: 二级菜单,
                icon: <MenuOutlined />,
                children: [
                    {
          
   
                        path: /menu/level/submenu-1,
                        title: 三级菜单1,
                        icon: <WechatOutlined />
                    },
                    {
          
   
                        path: /menu/level/submenu-2,
                        title: 三级菜单2,
                        icon: <QqOutlined />
                    }
                ]
            }
        ]
    },
];