react 动态显示菜单列表

在src目录下的config文件下建立一个包含所有导航信息的menuConfig.js。将所有导航信息抽离出来存放。

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

在所需的页面内引入文件

import menuList from "../../config/menuConfig";

根据menu的数据数组生成对于标签数组

1.使用map() + 递归调用

import React ,{Component} from "react";
import {Link} from 'react-router-dom'
import {Menu,Icon} from "antd";
import menuList from "../../config/menuConfig";
import {  FileOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

/*
* 左侧导航组件
* */
export default class LeftNav extends Component {
    /*
    * 根据menu的数据数组生成对于标签数组
    * 使用map() + 递归调用
    * */
    getMenuNodes_map = (menuList) =>{
        return menuList.map(item=>{
            if(!item.children){
                return(
                    <Menu.Item key ={item.key} icon={<FileOutlined/>}>
                        <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>
                )
            }

        })
    }

    //  * 根据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() {
     return(
         <div>
             <div className="logo"/>
             <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                 {
                     this.getMenuNodes(menuList)  //获取menu的所有子节点
                 }
             </Menu>
         </div>
     )
 }
}

2.使用reduce () + 递归调用

import React ,{Component} from "react";
import {Link} from 'react-router-dom'
import {Menu,Icon} from "antd";
import menuList from "../../config/menuConfig";
import {  FileOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

/*
* 左侧导航组件
* */
export default 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() {
     return(
         <div>
             <div className="logo"/>
             <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                 {
                    this.getMenuNodes(menuList)  //获取menu的所有子节点
                 }
             </Menu>
         </div>
     )
 }
}

摘自：https://blog.csdn.net/weixin_43548815/article/details/108414832