[JavaScript知识库]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渲染

//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.map(item=>{
        if(!item.children){
            return (
                <Menu.Item key={item.key} icon={item.icon}>
                     <Link to={item.key}>
                		{item.title}
                     </Link>
               	</Menu.Item>
            )
        }else{
            return (
          		<SubMenu key={item.key} icon={item.icon} title={item.title}>
                    this.getMenuNodes(item.children)
                </SubMenu>
            )
        }
     })
 }
  render() {
    return (
      <div style={{ width: 256 }}>
        <Menu
          mode="inline"
          theme="dark"
        >
              {this.getMenuNodes(this.menuList)}
        </Menu>
      </div>
    );
  }
}
export default class LeftMenu;

3.几个小细节

1.点击菜单跳转路由

<!--菜单标签里面套一个Link标签-->
<Link to={item.key}>
    <Menu.Item key={item.key} icon={item.icon}>
         <Link to={item.key}>
            {item.title}
         </Link>
    </Menu.Item>
</Link>

2.动态生成菜单

//利用 数组的map方法+递归 （如上代码）
//或者 数组的reduce方法+递归

//reduce方法的两个参数：参数一函数（pre累加的结果，），参数二：初始化的值
getMenuNodes(menuList){
    menuList.reduce((pre,item)=>{ 
        if(!item.children){
            pre.push(<Menu.Item key={item.key} icon={item.icon}>
                     <Link to={item.key}>
                		{item.title}
                     </Link>
               	</Menu.Item>)
        }else{
            pre.push(<SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuNodes(item.children)}
                    </SubMenu>)
        }
        return pre;//一定要把累加结果返回出去，看着别map方法稍麻烦一点
    },[])
}

3.自动选中当前菜单项

• defaultSelectedKeys ,初始选中的菜单项 key 数组只能保证页面刚打开时默认展示的菜单项，但是页面刷新后，就失效了；

• 而selectedKeys 当前展开的 SubMenu 菜单项 key 数组,可以是动态的；

那么怎么得到当前请求的路由路径呢？

我们知道，路由组件有三个属性，可以从里面的this.props.location.pathname中得到，但是LeftMenu只是Admin组件的一个子组件，不是路由组件，要想让普通组件变成路由组件，拥有三大属性，react提供了一个方法，就是利用高阶组件withRouter

import {withRouter} from 'react-router-dom'
class LeftMenu extends React.Component{
    //....
    render(){
        const key = this.props.location.pathname;//2.获取当前请求的路由路径 3.把给Menu的selectedKeys属性(数据中key跟path的值一样)
        return (
        	<Menu
              mode="inline"
              theme="dark"
              selectedKeys={[key]}
            >
                  {this.getMenuNodes(this.menuList)}
            </Menu>
        )
    }
}
export default withRouter(<LeftMenu />) //1.暴漏的时候包裹一个withRouter即可!!!!!!!!!

4.自动打开当前子列表

• defaultOpenKeys 初始展开的 SubMenu 菜单项 key 数组
• openKeys 当前展开的 SubMenu 菜单项 key 数组

<Menu
  mode="inline"
  theme="dark"
  selectedKeys={[key]}
  openKeys={[this.openKey]}
>
      {this.getMenuNodes(this.menuList)}
</Menu>
//那么这个openKey怎么拿到呢？？？？？，下面：

//通过调用getMenuNodes得到openKeys,并保存在this中
getMenuNodes(menuList){
    const path = this.props.location.pathname;
     menuList.map(item=>{
        if(!item.children){
            return (
                <Menu.Item key={item.key} icon={item.icon}>
                     <Link to={item.key}>
                		{item.title}
                     </Link>
               	</Menu.Item>
            )
        }else{
            //查找一个与当前请求路径匹配的子Item
            const cItem = item.children.find(cItem.key===path)
    		if(cItem){//如果存在，说明当前Item的子列表需要打开
                this.openKey = item.key
            }
            return (
          		<SubMenu key={item.key} icon={item.icon} title={item.title}>
                    {this.getMenuNodes(item.children)}
                </SubMenu>
            )
        }
     })
 }
 //但是生成菜单nodes的方法getMenuNodes是在 render()函数中return时才调用的，但是使用openKeys是在render函数return之前使用的，所以拿不到。
 

所以我们需要在render() 最上面先调用getMenuNodes(),但是放在render()函数中，每次更新的话，都要调用，所以最好放在componentWillMount声明周期中调用：

componentWillMount(){
    this.menuNodes = this.getMenuNodes(this.menuList)
}
render(){
    return (
    	<SubMenu key={item.key} icon={item.icon} title={item.title}>
                {this.menuNodes}   
        </SubMenu>
    )
}