本教程操作环境：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中文网其它相关文章！
