antd 中 关于 菜单栏目 的 生成

配置文件  menuConfig.js

const MenuConfig = [
    {
        title:"首页",
        key:"/admin/home"
    }
    ,
    {
        title:"UI",
        key:"/admin/ui",
        children:[
            {
                title:"按钮",
                key:"/admin/ui/button",
            },
            {
                title:"弹框",
                key:"/admin/ui/modals",
            },
            {
                title:"loading",
                key:"/admin/ui/loading"
            }
        ]
    }

];
export default MenuConfig;

引入 的js 代码如下 

import React from "react";
import {Menu,Icon} from "antd";

import MenuConfig from "../../config/menuConfig";
import img from './img/apple.jpg'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


export default  class NavList extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            menuNode:'' 
        };
    }
    componentDidMount(){
        //执行完成以后 把节点放到 this.state.menuNode 里，方便下边直接渲染
        this.setState({menuNode:this.renderMenu(MenuConfig)});
    };

    //得到函数的方法；
    renderMenu=(data)=>{
       //循环这个数据，拿到这个数据的结果；
        return data.map((item,index)=>{
            
            //如果子项里含有children属性，递归循环这个属性拿到子节点；
            if(item.children){
                return (<SubMenu key={item.key} title={item.title} >
                    {this.renderMenu(item.children)}
                </SubMenu>)

            }else{
                // 否则正常返回
                return <Menu.Item key={item.key}>{item.title}</Menu.Item>
            }
        });

    };


    render(){
        return(<div>
          <div style={{width:'100%',height:'200px',textAlign:"center",
              background:'rgba(0, 0, 0, 0.9)',color:"#fff"}}>
            <img src={img}    style={{width:"100%",height:"80%"}} />
              <p  style={{textAlign:"center",width:'100%',height:'20%',
                  lineHeight:"40px"}}>后台管理系统</p>
          </div>
            <Menu  theme="dark">
                {this.state.menuNode}
            </Menu>
        </div>)
    }

}