13518219792
今天小编给大家分享的是react实现左侧菜单的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。
创新互联公司主打移动网站、成都网站设计、成都做网站、外贸网站建设、网站改版、网络推广、网站维护、申请域名、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
react实现左侧菜单的方法：1、定义好路由结构，代码如“const Router = [{title: '',icon: 'laptop',...}]”；2、引入router文件，通过map遍历循环；3、处理一级菜单和子级菜单栏，代码如“renderSubMnenu = ({title,key,child}) => {...}”。
使用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;
处理一级菜单
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 (
)
}
}
export default withRouter(AsideMenu) 关于react实现左侧菜单的方法就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。
