39.React动态菜单组件实现

实现动态菜单主要是使用递归+Menu组件来实现的。
递归用来二级以及多级菜单。
判断menu是否有children，有的话遍历其下面的children，展示菜单；没有的话，直接展示为一级菜单即可。
Q：为什么不直接在render函数中使用递归来实现呢？
A：没有用js方式控制方便。

//声明菜单配置menuList.js文件
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",
      },
    ],
  },
];

export default menuList;

import React, { Component } from "react";
import { Menu, Icon } from "antd";

import { Link } from "react-router-dom";
import menuList from "../../config/menuConfig";
const { SubMenu } = Menu;
export default class LeftNav extends Component {
  state = {
    collapsed: false,
  };
//显示菜单组件的js方法
  getMenuNodeList = (menuList) => {
    return menuList.map((item, index) => {
      if (item.children) {
        return (
          <SubMenu
            key={item.key}
            title={
              <span>
                <Icon type={item.icon} />
                <span>{item.title}</span>
              </span>
            }
          >
            {this.getMenuNodeList(item.children)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={item.key}>
            <Link to={item.key}>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      }
    });
  };
  render() {
    return (
      <div className="left-nav">
        <Menu
          defaultSelectedKeys={["/home"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          {this.getMenuNodeList(menuList)}
        </Menu>
      </div>
    );
  }
}