react實作左側選單的方法：1、定義好路由結構，程式碼如「const Router = [{title: '',icon: 'laptop',...}]」；2、引入router文件，透過map遍歷循環；3、處理一級選單和子級選單欄，程式碼如「renderSubMnenu = ({title,key,child}) => {...}」。
本教學操作環境：Windows10系統、react18版、Dell G3電腦。
react怎麼實作左側選單？
使用React實作左側選單列
簡介： 使用React實作左側選單列
antd專門為react客製的中後台元件庫，提供了大量的元件供開發者使用，
官網位址點擊跳轉
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;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>
)
}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 (
)
}
}
export default withRouter(AsideMenu)react影片教學》
以上是react怎麼實作左側選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
