NavLeftMenu

左侧菜单栏生成

定义菜单结构：

const menuList = [
    {
        title: '首页',
        key: '/home',
        icon: 'home',
    },
    {
        title: '表单',
        key: '/form',
        icon: 'mail',
        children: [
            {
                title: '登录',
                key: '/form/login',
            },
            {
                title: '注册',
                key: '/form/reg',
            }
        ]
    },
    {
        title: '城市管理',
        key: '/city'
    },
    {
        title: '订单管理',
        key: '/order',
        btnList: [
            {
                title: '订单详情',
                key: 'detail'
            },
            {
                title: '结束订单',
                key: 'finish'
            }
        ]
    },
    {
        title: '员工管理',
        key: '/user',
        icon: 'user'
    },
    {
        title: '车辆地图',
        key: '/bikeMap',
    },
    {
        title: '权限设置',
        key: '/permission',
    },
];
export default menuList;

2. 通过 componentWillMount 初始化的时候调用遍历菜单json格式数据生成菜单

    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState( {
            menuTreeNode
        })
    }

3. 遍历菜单json格式数据生成菜单

 // 菜单渲染
    renderMenu = (data) =>{
        return data.map((item) =>{
            if(item.children){
                return (
                    <SubMenu key={item.key} title={
                        <span>
                          <Icon type={item.icon} />
                          <span>{item.title}</span>
                        </span>
                    }>
                        { this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item
                key={item.key}
                title={item.title}
                >
                <Icon type={item.icon}/>
                {/*<NavLink to={item.key}>{item.title}</NavLink>*/}
                {item.title}
            </Menu.Item>

        })
    }

4. 显示左侧菜单

render() {
        return (
            <div>
                {/*<NavLink to="/home" onClick={this.homeHandleClick}>*/}
                    <div className="logo">
                        <img src="/assets/logo-ant.svg" alt=""/>
                        <h1>环球车队</h1>
                    </div>
                {/*</NavLink>*/}
                <Menu
                    onClick={this.handleClick}
                    theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        );
    }

生成的菜单