使用React实现左侧菜单栏-阿里云开发者社区

开发者社区> 小周sir> 正文

使用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;

<Menu
                    onOpenChange={this.openMenu}
                    onClick={this.selectMenu}
                    theme="dark"
                    mode="inline"
                    selectedKeys={selectedKeys}
                    openKeys={openKeys}
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    {
                        Router && Router.map(firstItem => {
                            return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                        }) 
                    }
                    
                    </Menu>
  • 处理一级菜单
    renderMenu =({title,key}) => {
        return (
            <Menu.Item key={key}>
                <Link to={key}>
                    <span>{title}</span>
                </Link>
            </Menu.Item>
        )
    }   
  • 处理子级菜单栏 递归
    renderSubMnenu = ({title,key,child}) => {
        return (
            <SubMenu key={key} title={title}>
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item)
                    })
                }
            </SubMenu>
        )
        
    }

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

  • 根据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 (
            <Menu.Item key={key}>
                <Link to={key}>
                    <span>{title}</span>
                </Link>
            </Menu.Item>
        )
    }   
    // 处理子级菜单栏
    renderSubMnenu = ({title,key,child}) => {
        return (
            <SubMenu key={key} title={title}>
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item)
                    })
                }
            </SubMenu>
        )
        
    }
    render() {
        const { selectedKeys,openKeys } = this.state
        return (
            <Fragment>
                <Menu
                    onOpenChange={this.openMenu}
                    onClick={this.selectMenu}
                    theme="dark"
                    mode="inline"
                    selectedKeys={selectedKeys}
                    openKeys={openKeys}
                    style={{ height: '100%', borderRight: 0 }}
                    >
                    {
                        Router && Router.map(firstItem => {
                            return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                        }) 
                    }
                    
                    </Menu>
            </Fragment>
        )
    }
}
export default withRouter(AsideMenu)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Redis搭建持久化K-V存储
最近在项目中需要在多机之间共享一些集合,Hash等有类型的数据结构,如果基于Mysql来存储的话需要预先定义一系列表结构并维护表结构和数据结构的一致性,后续还需要根据时间对数据库做旧数据清理工作,所以开始调研一些能满足下列需求的存储引擎。 具有高可用,持久化的特性。 数据可以设置失效时间,方便自动数据清理。 支持常用数据结构,如集合,有序集合,Hash map,列表等。 支持事务操作,
4330 0
C++ 使用STL string 实现的split,trim,replace-修订
编辑器加载中... 使用python的时候默认str 对字符串操作支持非常丰富,相信每个C++程序员都自己写过string的strim、split、replace, 写个小工具函数,留着用,以前偷懒,写了好几次,这次总结一下,贴出来。
616 0
使用redis远程连接数据库
使用redis远程连接数据库 1.首先下在redis 略 2.下载好后如图 3.输入远程数据库地址 error 错误信息提示的是 没有数据库权限,需要输入密码 4.
655 0
Asp.net MVC Preview 4 中使用RenderComponent
RenderComponent在Pv3及以前版本中经常用到,自从Monorails而来Component就以其方便自然而让我很是喜欢,虽然它性能明显不如Parse/UserControl 在pv4中要使用以下方法来调用组件  n.About()); %> 注意2点 原来的
542 0
使用 readfile() 下载文件
下载图片 下载xlsx文档 header('Content-Description: File Transfer'); header("Content-Type: application/vnd.
879 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载