基于antd，实现左侧导航栏

主要总结基于antd实现的左侧导航栏，样式类型为：只展开当前父级菜单，点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

含有子集导航的导航条的实现原理为递归实现，判断当前遍历项是否含有子集，若有则再次调用函数进行遍历，同时返回，这个标签代表的是含有子集的父级菜单，若不存在子集，那么直接输入菜单的每一项<Menu.Item>{item.title}</Menu.Item>，注意这里直接输出的时候，导航的名称是需要填写在标签之中的
上代码：（这里的antd,是已经配置过按需加载的）

import React,{Component} from 'react'
import MenuConfig from '../../config/menuConfig'
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

export default class NavLeft extends Component{
    rootSubmenuKeys=[]
    state = {
      openKeys: [],
    };
  // 点击时切换展开项
    onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(key => 
        this.state.openKeys.indexOf(key) === -1
    );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.setState({ openKeys });
      } else {
        this.setState({
          openKeys: latestOpenKey ? [latestOpenKey] : [],
        });
      }
    }
    componentWillMount(){
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode:menuTreeNode
        })
    }
    // 左边导航栏渲染（原理，通过递归的方式进行渲染）
    renderMenu = (data)=>{
        return data.map((item)=>{
            if(item.children){//当有子集存在的时候，需要再次调用遍历
                this.rootSubmenuKeys.push(item.key)
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                ) 
            }
            return (
                <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
            )
        })
    }
    render(){
        return(
            <div>
                <div className='logo'>
                    <img src="" alt=""/>
                    <h1>CMMM</h1>
                </div>
                <Menu
                theme='dark'
                mode="inline"
                openKeys={this.state.openKeys}
                onOpenChange={this.onOpenChange}
                >
                {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}

此处的导航栏的数据是从外部引入的，原数据为：

const MenuConfig = [
    {
        title:'首页',
        key:'/admin/home'
    },
    {
        title:'UI',
        key:'/ui',
        children:[
            {
                title: '按钮',
                key: '/ui/buttons',
            },
            {
                title: '弹框',
                key: '/ui/modals',
            },
            {
                title: 'Loading',
                key: '/ui/loadings',
            },
            {
                title: '通知提醒',
                key: '/ui/notification',
            },
            {
                title: '全局Message',
                key: '/ui/messages',
            },
            {
                title: 'Tab页签',
                key: '/ui/tabs',
            },
            {
                title: '图片画廊',
                key: '/ui/gallery',
            },
            {
                title: '轮播图',
                key: '/ui/carousel',
            }            
        ]        
    },
    {
        title:'表单',
        key:'/from',
        children: [
            {
                title: '登录',
                key: '/form/login',
            },
            {
                title: '注册',
                key: '/form/reg',
            }
        ]       
    },
    {
        title:'表格',
        key:'/table',
        children: [
            {
                title: '基础表格',
                key: '/table/basic',
            },
            {
                title: '高级表格',
                key: '/table/high',
            }
        ]        
    },
    {
        title:'富文本',
        key:'/rich'        
    },
    {
        title:'城市管理',
        key:'/city'        
    },
    {
        title:'订单管理',
        key:'/order',
        btnList: [
            {
                title: '订单详情',
                key: 'detail'
            },
            {
                title: '结束订单',
                key: 'finish'
            }
        ]              
    },
    {
        title:'员工管理',
        key:'/user'        
    },
    {
        title:'车辆地图',
        key:'/bikeMap'        
    },
    {
        title:'图标',
        key:'/charts',
        children: [
            {
                title: '柱形图',
                key: '/charts/bar'
            },
            {
                title: '饼图',
                key: '/charts/pie'
            },
            {
                title: '折线图',
                key: '/charts/line'
            },
        ]       
    },
    {
        title: '权限设置',
        key: '/permission'
    },
]

export default MenuConfig;