React 左侧栏

一、路由配置
export const TabBarRouter = [
    {
        path:"/home",
        icon:"\ue628",
        name:"首页",
        meta:{
            flag:true
        },
        component:Home
    },
    {
        path:"/find",
        icon:"\ue663",
        name:"发现",
        meta:{
            flag:true
        },
        component:Find
    },
    {
        path:"/order",
        name:"订单",
        icon:"\ue737",
        meta:{
            flag:true
        },
        component:Order
    },
    {
        path:"/mine",
        name:"我的",
        icon:"\ue617",
        meta:{
            flag:true
        },
        component:Mine
    }
]

---

二、Tabbar遍历
                <ul>
                    {
                        TabBarRouter.map((item,index) => (
                            <li key={index}>
                                <NavLink to={item.path}>
                                    <i className="iconfont">{item.icon}</i>
                                    <span>{item.name}</span>
                                </NavLink>
                            </li>
                        ))
                    }
                </ul>

---

三、
import researchItems from "research_menu.js";
import { Menu, Button, Icon } from 'antd';
const { SubMenu } = Menu;

  componentWillMount(){
    var currentMenulist;
    if (this.props.is_research === 0) {
      currentMenulist = researchItems;
    } else {
      currentMenulist = researchItems;
    }
    // --------------------------------------------------------------
    const menu = currentMenulist.map(level1 => {
      // 1级菜单下渲染2级菜单************
      if (level1.child) {
        const level2menu = level1.child.map(level2 => {
          // -----------------------------------------------------------------------------------------
          // 1级菜单下渲染2级菜单************
          if (level2.child) {                  //如果2级菜单下有3级菜单 渲染3级菜单名字 + 下拉框
            const level3menu = level2.child.map(level3 => {
              if (level3.child) {         //如果3级菜单下有4级菜单 有下拉框
                const level4menu = level3.child.map(level4 => {
                  if (level4.child) {
                    return;
                  }else{
                    return(
                      // Option 9
                        {/* {level4.name} */}
                        {level4.name}
                    )
                  }
                })
                // 3级菜单下渲染4级菜单---------------------
                let level3Title;
                level3Title = (
                    {/* {level2.name[0]} */}
                    {level3.name}
                    {/* {level2.name} */}
                );
                return (
                  // 2级菜单下渲染3级菜单
                  
                    {/* {level3.name} */}
                    {/* {level2.name} */}
                    {level4menu}
                );
              }else{              //如果3级菜单下没有4级菜单 直接渲染 没有下拉框
                return(
                  // Option 9
                    {/* {level3.name} */}
                    {level3.name}
                )
              }
            })
            // ------------------------------------------------------------------------------
            // // 2级菜单下渲染3级菜单---------------------
            let level2Title;
            level2Title = (
                {/* {level2.name[0]} */}
                {/*  */}
                {level2.name}
                            {/* {level1.name} */}
                {/* {level2.name} */}
            );
            return (
              // 2级菜单下渲染3级菜单
              
                {/* {level3.name} */}
                {/* {level2.name} */}
                {level3menu}
            );
          }else{                    //如果2级菜单下没有3级菜单 只渲染3级菜单名字 没有下拉框
            return(
              // Option 9
                {/* {level2.name} */}
                  {/*  */}
                  {level2.name}
            )
          }
          // -----------------------------------------------------------------------------------------
        })
        // 1级菜单下渲染2级菜单---------------------
        let level1Title;
        level1Title = (
            {/* 首页 */}
            {level1.name}
        );
        return (
          // 1级菜单下渲染2级菜单
            {level2menu}
        );
      }
    })
    // --------------------------------------------------------------
    this.menu = menu;
  }

        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['cloudProfile']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
          // className="menus"
          onOpenChange={this.handleOpenChange.bind(this)}
          onSelect={this.handleSelect.bind(this)}
        >
          {/* ----------------------------------------------------------------- */}
          {/* <Link>首页</Link> */}
          {/* <li><Link to="http://localhost:8080/#/p">首页</Link></li> */}
          {/* <li><Link to={`/${parentPath}`}>首页</Link></li> */}
          {/* <Link to={`/p`}>首页</Link> */}
          {/* <SubMenu key="cloudProfile" title={
            } onTitleClick = {this.titleClick.bind(this)}>
            <Menu.Item key="cloudProfilesa">
              <Link to={`/${researchItems[0]['key'] + '/' + researchItems[0]['child'][0]['key']}`}>首页</Link>
            </Menu.Item>
            <Menu.Item key="cloudProfiles">虚拟资源云平台概况</Menu.Item>
            <Menu.Item key="cloudProfilesc">容器平台概况</Menu.Item>
          </SubMenu> */}
            
          {/* ----------------------------------------------------------------- */}
          {/* <SubMenu key="sub2"  title="Navigation Two" title={
              <span>
                <Icon type="appstore" />
                <span>Navigation Two</span>
              </span>
            }>
            <Menu.Item key="9">
              <Icon type="pie-chart" />
              <span>Option 1</span>
            </Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
          </SubMenu> */}
          {/* ----------------------------------------------------------------- */}
          {this.menu}
        </Menu>