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; <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)
推荐学习:《react视频教程》
以上就是react怎么实现左侧菜单的详细内容,更多请关注php中文网其它相关文章!