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 />
                    }
                ]
            }
        ]
    },
];