react项目：动态显示菜单列表--map() + 递归调用与使用reduce() + 递归调用

使用map() + 递归调用 导航部分index.jsx

import React ,{Component} from "react";
import {Link,withRouter} from 'react-router-dom'
import {Menu,Icon} from "antd";
import menuList from "../../config/menuConfig";
import {  FileOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
/*
* 左侧导航组件
* */
class LeftNav extends Component {
    /*
    * 根据menu的数据数组生成对于标签数组
    * 使用map() + 递归调用
    * */
     getMenuNodes_map = (menuList) =>{
         return menuList.map(item=>{
             if(!item.children){
                 return(
                    <Menu.Item key ={item.key} icon={<FileOutlined/>} defaultSelectedKeys={['1']}>
                         <Link to={item.key}>
                            <Icon type={item.icon}/>
                             <span>{item.title}</span>
                         </Link>
                     </Menu.Item>
                 )
             }else{
                 return(
                     <SubMenu key={item.key}  title={
                         <span>
                              {<FileOutlined/>}
                             <span>{item.title}</span>
                         </span>
                     }>
                         {this.getMenuNodes(item.children)}
                     </SubMenu>
                )
            }
        })
     }
    render() {
        // debugger
        // const menuNodes = this.getMenuNodes(menuList);
        // //得到当前请求的路由路径
        const path = this.props.location.pathname;
        //得到需要打开菜单项的key
        const openKey = this.openKey;

     return(
         <div>
             <div className="logo"/>
             <Menu theme="dark"
                   selectedKeys={path}
                   defaultOpenKeys={[openKey]}
                   mode="inline">
                     // this.menuNodes
                     this.getMenuNodes(menuList)  //获取menu的所有子节点
                 }
             </Menu>
         </div>
     )
 }
}

//withRouter高阶组件：
// 包装非路由组件，返回一个新的组件
// 新的组件向非路由组件传递三个属性history/location/match
export default withRouter(LeftNav)

使用reduce()+ 递归调用 导航部分index.jsx

import React ,{Component} from "react";
import {Link,withRouter} from 'react-router-dom'
import {Menu,Icon} from "antd";
import menuList from "../../config/menuConfig";
import {  FileOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
/*
* 左侧导航组件
* */
class LeftNav extends Component {
    //  * 根据menu的数据数组生成对于标签数组
    //  * 使用reduce() + 递归调用
    getMenuNodes = (menuList) =>{
        return menuList.reduce((pre,item) =>{
            if (!item.children) {
                //向pre中添加<Menu.Item>
                pre.push((
                    <Menu.Item key ={item.key} icon={<FileOutlined/>}>
                        <Link to={item.key}>
                            <Icon type={item.icon}/>
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                ))
            }else{
                //向pre中添加<SubMenu>
                pre.push((
                    <SubMenu key={item.key}  title={
                        <span>
                             {<FileOutlined/>}
                            <span>{item.title}</span>
                        </span>
                    }>
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                ))
            }

            return pre;
        },[])
    }
    render() {
        // debugger
        // const menuNodes = this.getMenuNodes(menuList);
        // //得到当前请求的路由路径
        const path = this.props.location.pathname;
        //得到需要打开菜单项的key
        const openKey = this.openKey;

     return(
         <div>
             <div className="logo"/>
             <Menu theme="dark"
                   selectedKeys={path}
                   defaultOpenKeys={[openKey]}
                   mode="inline">
             
                 {
                     // this.menuNodes
                     this.getMenuNodes(menuList)  //获取menu的所有子节点
                 }
             </Menu>
         </div>
     )
 }
}

//withRouter高阶组件：
// 包装非路由组件，返回一个新的组件
// 新的组件向非路由组件传递三个属性history/location/match
export default withRouter(LeftNav)

config文件夹下menuConfig.js

const menuList = [
    {
        title:'首页',  //菜单标题名称
        key:'/home', //对应的path
        icon:'TeamOutlined',//图标名称
    },
    {
        title:'用户信息',
        key:'/user',
        icon:'TeamOutlined',
    },
    {
        title:'图片管理',
        key:' ',
        icon:'pic',
        children:[
            {
                title:'图片信息',
                key:'/pic',
            }
        ]
    }
]
export default menuList