react 后台管理项目中 结合antd (v4.0) 动态生成左侧菜单栏

一级路由：

• /login
• /admin

下面配置admin的二级路由

1.准备好数据

假设从后台得到的数据结构（根据不同角色返回的不同菜单数据）

const menuList = [
	{
   
        title: '首页',
        icon: '<HomeOutlined />',
        key: '/index',
    },
    {
   
        title: '商品',
        icon: '<ShopOutlined />',
        key: '/productCate',
        children:[
            {
   
                title: '品类管理',
        		icon: '<BarsOutlined />',
        		key: '/category',
            },
            {
   
                title: '商品管理',
        		icon: '<CalendarOutlined />',
        		key: '/product',
            }
            
        ]
        
    }
    {
   
        title: '用户管理',
        icon: '<UserOutlined />',
        key: '/user',
    },
    {
   
        title: '角色管理',
        icon: '<SafetyCertificateOutlined />',
        key: '/role',
    },
    
]

2.利用antd提供的菜单menu渲染

• 方法一：数组的map方法+递归

//leftMenu.jsx'
import {
    Menu } from 'antd';
import {
   
  HomeOutlined,
  ShopOutlined,
  BarsOutlined,
  CalendarOutlined,
  UserOutlined,
  SafetyCertificateOutlined,
} from '@ant-design/icons';
const {
    SubMenu } = Menu;

class LeftMenu extends React.Component {
   

 getMenuNodes(menuList){
   
     menuList.