动态配置菜单列表

2020-9-13总结

动态显示菜单列表

// 菜单列表
const menuList = [
  {
    title: "首页",
    key: "/main",
  },
  {
    title: "商品",
    key: "/products",
    children: [
      {
        title: "品类管理",
        key: "/category",
      },
      {
        title: "商品管理",
        key: "/product",
      },
    ],
  },
  {
    title: "用户管理",
    key: "/user",
  },
  {
    title: "角色管理",
    key: "/role",
  },
  {
      title:'图形图表',
      key:"charts",
      children:[
          {
              title:'bar图',
              key:'/charts/bar'
          },
          {
              title:'line图',
              key:"/charts/line"
          },
          {
              title:'pie图',
              key:"/charts/pie"
          }
      ]
  }
];
 //根据数组数组生成对应的标签数组
  //使用map+递归调用
  getMenuNodes_map = (menuList) => {
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key}>
            <Link to={item.key}>
              <MailOutlined />
              <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu
            key={item.key}
            icon={<AppstoreOutlined />}
            title={item.title}
          >
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };
// 使用reduce()+递归调用
  getMenuNodes=menuList=>{
    return menuList.reduce((pre,item)=>{
      if(!item.children){
        pre.push(( <Menu.Item key={item.key}>
          <Link to={item.key}>
            <MailOutlined />
            <span>{item.title}</span>
          </Link>
        </Menu.Item>))
      }else{
        pre.push((
          <SubMenu
            key={item.key}
            icon={<AppstoreOutlined />}
            title={item.title}
          >
            {this.getMenuNodes(item.children)}
          </SubMenu>
        ))
      }
      return pre;
    },[])
  }