react+antD实现菜单数据递归渲染成导航组件

Nav

import React from 'react';
import { Menu } from 'antd'
// import './index.css';
// import 'antd/dist/antd.css';
const SubMenu = Menu.SubMenu

const menuData = [
    {
        key: '/home',
        title: '首页'
    },
    {
        key: '/user',
        title: '用户管理',
        children: [
            {
                key: '/user/channel',
                title: '用户渠道管理'
            },
            {
                key: '/user/potential',
                title: '潜在用户管理'
            },
        ]
    },
    {
        key: '/order',
        title: '订单管理',
        children: [
            {
                key: '/order/train',
                title: '火车票订单'
            },
            {
                key: '/order/plane',
                title: '飞机票订单'
            },
        ]
    }
]

export default class Nav extends React.PureComponent {
    constructor(props) {    
        super(props)
        this.state = {
            menuList: null
        }
    }
    renderMenuData = (data) => {
        return data.map((item) => {
            // console.log('item', item);
            if(item.children) {
                return(
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenuData(item.children)}
                    </SubMenu>
                )
            }
            console.log('ggggg:',<Menu.Item key={item.key}>{item.title}</Menu.Item>)
            return <Menu.Item key={item.key}>{item.title}</Menu.Item>
        })
    }
    componentDidMount() {
        const menuList = this.renderMenuData(menuData);
        this.setState({menuList});
    }
    render() {
        return (
            <div className='nav'>
                <Menu theme="dark">
                    {this.state.menuList}
                    {/* <Menu.Item key="0">菜单项1</Menu.Item>
                    <Menu.Item key="1">菜单项2</Menu.Item>
                    <SubMenu key="sub1" title="子菜单">
                        <Menu.Item key="2">子菜单项1</Menu.Item>
                        <Menu.Item key="3">子菜单项2</Menu.Item>
                    </SubMenu> */}
                </Menu>
            </div>
        )
    }
}