3.左侧导航栏

<script> 
//根据指定menu数据数组生成<Menu.Item>和SubMenu的数组
  //map+函数递归
  renderMenu = (menuList) => {
    return menuList.map(item => {
      if (!item.children) {
        return (<Menu.Item key={item.key}>
          <Link to={item.key}>
            <Icon type={item.icon} />
            <span>{item.title}</span>
          </Link>
        </Menu.Item>
        )
      } 
      return(
        <SubMenu
        key={item.key}
        title={
          <span>
            <Icon type={item.icon} />
            <span>{item.title}</span>
          </span>
        }
      >
        {this.renderMenu2(item.children)}
      </SubMenu>
      )
    })
  }

  render() {
    return (
      <div className={styles.leftNav}>
        <header>
          <Link to="/" >
            后台系统
          </Link>
        </header>
        <Menu
          defaultSelectedKeys={[‘/home‘]}
          // defaultOpenKeys={[‘sub1‘]}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >

      {this.renderMenu(menuList)}
 </Menu>
      </div>
    );
  }
}
</script/>

  //根据指定menu数据数组生成<Menu.Item>和SubMenu的数组
  // reduce+函数递归
  renderMenu2=(menuList)=>{
    //求奇数和
    const arr1=[1,2,3,4]
    arr1.reduce((preTotal,item)=>{
      // return preTotal + item //这样是所有元素的和  必须把当此统计的结果return  变为下次统计的初始值
      return proTotal + (item%2===1?item:0)  //返回奇数和  这个是便利回调函数：统计：必须返回当此统计的结果
    },0)  //0代表的初始总和
  }

<script>
//让子菜单能自动选中

renderMenu2=(menuList)=>{


    const path = this.props.location.pathname
    return menuList.reduce((pre,item)=>{
      //可能向pre添加<Menu.Item></Menu.Item>
      if(!item.children){
        pre.push(<Menu.Item key={item.key}>
          <Link to={item.key}>
            <Icon type={item.icon} />
            <span>{item.title}</span>
          </Link>
        </Menu.Item>)
      }else{
        /*
        判断当前item的key是否是我需要的openKey
        查找item的所有children中cItem的key，看是否有一个跟请求的path匹配
        */
       const cItem = item.children.find(cItem=>cItem.key===path)
       if(cItem){
         this.openKey = item.key
       }
        pre.push(  <SubMenu
          key={item.key}
          title={
            <span>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </span>
          }
        >
          {this.renderMenu2(item.children)}
        </SubMenu>)
      }
      //可能是SubMenu
      return pre
    },[])
  }
 render() {

    //因为下方的this.openKey会拿不到值，因该先把子组件渲染出来拿到openKey
    const menuNode = this.renderMenu2(menuList)

    //得到当前请求的路由路径：这个是路由的能力
    const selectKey = this.props.location.pathname  //但是this.props.location是undefied  props里没有location
    //这是个非路由组件，所以没有history,location  但我们需要路由里面的属性
    //这时候路由组件提供了withRouter 

    return (
      <div className={styles.leftNav}>
        <header>
          <Link to="/" >
            后台系统
          </Link>
        </header>
        <Menu
          defaultSelectedKeys={[selectKey]} //这个值应该根据路径进行变化，而不是固定的
          defaultOpenKeys={[this.openKey]}  //没有这个的时候，路径为子菜单的时候，不会展开，看不到，需要请求到子路由的时候让他自动展开
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >

      {menuNode}
</Menu>
</div>






</script>