react怎么实现左侧菜单-尊龙凯时

react实现左侧菜单的方法：1、定义好路由结构，代码如“const router = [{title: '',icon: 'laptop',...}]”；2、引入router文件，通过map遍历循环；3、处理一级菜单和子级菜单栏，代码如“rendersubmnenu = ({title,key,child}) => {...}”。

本教程操作环境：windows10系统、react18版、dell g3电脑。

react怎么实现左侧菜单？

使用react实现左侧菜单栏

简介： 使用react实现左侧菜单栏

antd专门为react定制的中后台组件库，提供了大量的组件供开发者使用，

• 尊龙凯时官网地址 点击跳转

• 在中后台中，菜单项是必不可少的，今天就使用react结合antd配置一个菜单栏目

先定义好路由结构

const router = [{
        title: '控制台',
        icon: 'laptop',
        key: '/index',
        role: ["user", "information", "product"]
    },
    {
        title: '用户管理',
        icon: 'laptop',
        key: '/index/user', // 菜单
        role: ["information", "user"], // 角色 
        child: [{
                key: '/index/user/list',
                title: '用户列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/user/add',
                title: '添加用户',
                icon: '',
                role: ["user"]
            }
        ]
    },
    {
        title: '部门管理',
        icon: 'bars',
        key: '/index/department',
        role: ["user"],
        child: [{
                key: '/index/department/list',
                title: '部门列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/department/add',
                title: '添加部门',
                icon: '',
                role: ["user"]
            },
        ]
    },
    {
        title: '加班',
        icon: 'info-circle-o',
        key: '/home/abouta'
    }
]
export default router;

使用antd提供的menu

• 这个需要考虑一些情况，当路由有一级菜单或者下面的子菜单需要处理

• 引入router文件,通过map遍历循环

• 通过map遍历，判断是否有二级菜单

-

import router from './../../router/index'
import {  menu } from 'antd';
const { submenu } = menu;

                    {
                        router && router.map(firstitem => {
                            return firstitem.child && firstitem.child.length > 0 ? this.rendersubmnenu(firstitem) : this.rendermenu(firstitem)
                        }) 
                    }
                    
                    

处理一级菜单

    rendermenu =({title,key}) => {
        return (
            
                
                    {title}
                
            
        )
    }

处理子级菜单栏 递归

  rendersubmnenu = ({title,key,child}) => {
        return (
            
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.rendersubmnenu(item) : this.rendermenu(item)
                    })
                }
            
        )
        
    }

处理菜单选择，高亮，刷新保持选中状态

• 根据antd提供的api 去操作

• selectedkeys 当前选中的菜单项 key 数组 openkeys, 当前展开的 submenu 菜单项 key 数组

constructor(props) {
        super(props);
        this.state= {
            selectedkeys:[],
            openkeys:[]
        }
    }
    componentdidmount(){
        // 菜单状态
        const pathname = this.props.location.pathname;
        const menukey = pathname.split("/").slice(0,3).join('/');
        const menuhigh = {
            selectedkeys: pathname,
            openkeys: menukey
        }
        this.selectmenuhigh(menuhigh)
    }
    selectmenu =({item,key,keypath}) => {
        // 选中菜单
        const menuhigh = {
            selectedkeys: key,
            openkeys: keypath[keypath.length - 1]
        }
        this.selectmenuhigh(menuhigh)
    }
    openmenu = (openkeys) => {
        // 展开
        this.setstate({
            openkeys: [openkeys[openkeys.length - 1]]
        })
    }
    selectmenuhigh = ({selectedkeys,openkeys}) => {
        // 菜单高亮
        this.setstate({
            selectedkeys: [selectedkeys],
            openkeys: [openkeys]
        })
    }

完整代码

import react, { component,fragment } from 'react'
import {link,withrouter} from 'react-router-dom'
import router from './../../router/index'
import {  menu } from 'antd';
const { submenu } = menu;
class asidemenu extends component {
    constructor(props) {
        super(props);
        this.state= {
            selectedkeys:[],
            openkeys:[]
        }
    }
    componentdidmount(){
        // 菜单状态
        const pathname = this.props.location.pathname;
        const menukey = pathname.split("/").slice(0,3).join('/');
        const menuhigh = {
            selectedkeys: pathname,
            openkeys: menukey
        }
        this.selectmenuhigh(menuhigh)
    }
    selectmenu =({item,key,keypath}) => {
        // 选中菜单
        const menuhigh = {
            selectedkeys: key,
            openkeys: keypath[keypath.length - 1]
        }
        this.selectmenuhigh(menuhigh)
    }
    openmenu = (openkeys) => {
        // 展开
        this.setstate({
            openkeys: [openkeys[openkeys.length - 1]]
        })
    }
    selectmenuhigh = ({selectedkeys,openkeys}) => {
        // 菜单高亮
        this.setstate({
            selectedkeys: [selectedkeys],
            openkeys: [openkeys]
        })
    }
    // 处理一级菜单栏
    rendermenu =({title,key}) => {
        return (
            
                
                    {title}
                
            
        )
    }   
    // 处理子级菜单栏
    rendersubmnenu = ({title,key,child}) => {
        return (
            
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.rendersubmnenu(item) : this.rendermenu(item)
                    })
                }
            
        )
        
    }
    render() {
        const { selectedkeys,openkeys } = this.state
        return (
            
                
                    {
                        router && router.map(firstitem => {
                            return firstitem.child && firstitem.child.length > 0 ? this.rendersubmnenu(firstitem) : this.rendermenu(firstitem)
                        }) 
                    }
                    
                    
            
        )
    }
}
export default withrouter(asidemenu)