3.左侧导航栏

<script>

<Menu
          defaultSelectedKeys={['/home']} //数组类型  让那个key被选中
          defaultOpenKeys={['sub1']}
          mode="inline"  //菜单下拉方式  vertival
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >

 　　　　

　　　　<Menu.Item key="/home">

            <Link to="/home">

              <Icon type="home" />

              <span>首页</span>

            </Link>

          </Menu.Item>

          <SubMenu

            key="pro"

            title={

              <span>

                <Icon type="mail" />

                <span>商品</span>

              </span>

            }

          >

            <Menu.Item key="/category">

              <Link to="/category">

                <Icon type="folder-open" />

                <span>品类管理</span>

              </Link>

            </Menu.Item>

            <Menu.Item key="/products">

              <Link to="/products">

                <Icon type="filter" />

                <span>商品管理</span>

              </Link>

            </Menu.Item>

          </SubMenu>

        </Menu>

 

</script>

每个menu都对应一个路由，所以配对的时候用路径

Menu.Item里的key就用路径来匹配  因为是唯一的

点击menu.item里的内容应该进行路由的跳转   所以用Link包裹起来

优化：不够灵活

一个菜单主要包含图标和文字和key   导航列表应该设置成为一个配置

src/config/menuConfig.js

<script>
const menuList = [
  {
    title: '首页', // 菜单标题名称
    key: '/home', // 对应的path
    icon: 'home', // 图标名称
    public: true, // 公开的
  },
  {
    title: '商品',
    key: '/products',
    icon: 'appstore',
    children: [ // 子菜单列表
      {
        title: '品类管理',
        key: '/category',
        icon: 'bars'
      },
      {
        title: '商品管理',
        key: '/product',
        icon: 'tool'
      },
    ]
  },

  {
    title: '用户管理',
    key: '/user',
    icon: 'user'
  },
  {
    title: '角色管理',
    key: '/role',
    icon: 'safety',
  },

  {
    title: '图形图表',
    key: '/charts',
    icon: 'area-chart',
    children: [
      {
        title: '柱形图',
        key: '/charts/bar',
        icon: 'bar-chart'
      },
      {
        title: '折线图',
        key: '/charts/line',
        icon: 'line-chart'
      },
      {
        title: '饼图',
        key: '/charts/pie',
        icon: 'pie-chart'
      },
    ]
  },
]

export default menuList
</script>

根据menuList生成标签类型，把menu里的内容显示出来

根据数组数据生成标签数组

 {menuList.map(item=>(

            <Menu.Item key={item.key}>

            <Link to={item.key}>

              <Icon type={item.icon} />

              <span>{item.title}</span>

            </Link>

          </Menu.Item>

          ))}

<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/>

扫描二维码关注公众号，回复： 7810475 查看本文章

 

 

用reduce方法实现menu

 

  //根据指定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 arr1=[1,2,3,4]
    // arr1.reduce((preTotal,item)=>{
    //   // return preTotal + item //这样是所有元素的和  必须把当此统计的结果return  变为下次统计的初始值
    //   return proTotal + (item%2===1?item:0)  //返回奇数和  这个是便利回调函数：统计：必须返回当此统计的结果
    // },0)  //0代表的初始总和

    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{
        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
    },[])
  }
</script>