react实现三级菜单的方法:1、创建展开三级父级菜单的方法为“onOpenChange = (openKeys) => {...}”;2、通过“handleSelectkeys(e){...}”设置选中状态;3、通过“oli.push(
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么实现三级菜单?
react + antd实现只展开一个父级菜单栏的侧边栏(三级菜单栏)
工作中遇到一个需求,三级侧边栏只能展开一个父级菜单栏,保持页面简洁,提高用户体验,也是在网上查了很久,也没有完全符合要求的,就结合他人的自己写了一个。。。。
展开三级父级菜单的方法
onOpenChange = (openKeys) => { const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1); let openList; if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { if(latestOpenKey&&latestOpenKey.length===3){ openList = this.state.openKeys.filter((e)=>{ return e.length!==3; }) this.setState({ openKeys:openList }); }else{ this.setState({ openKeys:openKeys }); } }else{ if(latestOpenKey&&latestOpenKey.length===3){ openList = this.state.openKeys.filter((e)=>{ return e.length!==3; }) openList.push(latestOpenKey); this.setState({ openKeys:openList[1] ? openList : [openList[0],openList[2]] }); }else{ this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [], }); } } }设置选中状态
handleSelectkeys(e){ if(this.state.isShow){ this.setState({ selectedKey:e.key, openKeys:e.keyPath[length] == 3 ? [e.keyPath[2],e.keyPath[1]] : [e.keyPath[0]], isShow:true }); } }Salin selepas log masuk
生成侧边栏
const data = this.props.list; var html = []; for(var i=0;i{liData.children[k].text} ) } var oul = {liData.iconCls && ; li.push(oul); }else{ li.push(}{liData.text}}>{oli} {liData.iconCls && ); } } var ul =} {liData.text} {data[i].iconCls && ; html.push(ul); }else{ html.push(}{data[i].text}}>{li} {data[i].iconCls && ) } }} {data[i].text}
侧边栏组件Menu.js 全部代码
import React from 'react'import { Menu,Icon } from 'antd';import {Link,withRouter} from 'react-router-dom'const { SubMenu } = Menu; class Menus extends React.Component{ constructor(props){ super(props) this.state={ openKeys:['1','100'], rootSubmenuKeys:[], selectedKeys:[this.props.history.location.pathname], //选中 isShow:false //判断是否已经展开,如已展开停止重新赋值避免重新渲染和关系菜单 } this.handleSelectkeys = this.handleSelectkeys.bind(this) } UNSAFE_componentWillMount(){ if(this.props.location.state){ this.setState({ openKeys:[this.props.location.state.parent,this.props.location.state.child ? this.props.location.state.child : ''] }) } } componentDidMount(props,nextProps){ var data = this.props.list; for(var i=0;i{ const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1); let openList; if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { if(latestOpenKey&&latestOpenKey.length===3){ openList = this.state.openKeys.filter((e)=>{ return e.length!==3; }) this.setState({ openKeys:openList }); }else{ this.setState({ openKeys:openKeys }); } }else{ if(latestOpenKey&&latestOpenKey.length===3){ openList = this.state.openKeys.filter((e)=>{ return e.length!==3; }) openList.push(latestOpenKey); this.setState({ openKeys:openList[1] ? openList : [openList[0],openList[2]] }); }else{ this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [], }); } } } render(){ const data = this.props.list; var html = []; for(var i=0;i {liData.children[k].text} ) } var oul = {liData.iconCls && ; li.push(oul); }else{ li.push(}{liData.text}}>{oli} {liData.iconCls && ); } } var ul =} {liData.text} {data[i].iconCls && ; html.push(ul); }else{ html.push(}{data[i].text}}>{li} {data[i].iconCls && ) } } return ( ) }}export default withRouter(Menus);} {data[i].text}
侧边栏数据 menu.js
const list = [ { "id":1, "text":"检查清单", "state":"closed", "iconCls":"home", "children":[ { "id":100, "text":"按月检查", "checked":false, "state":"closed", "iconCls":"", "url":"/platform/check/month" }, { "id":101, "text":"按年检查", "checked":false, "state":"closed", "iconCls":"", "url":"/platform/check/year" } ] }, { "id":2, "text":"数据预览导出", "iconCls":"laptop", "state":"closed", "checked":true, "children":[ { "id":200, "text":"做的书", "iconCls":"", "state":"closed", "checked":true, "children":[ { "id":20001, "text":"2018做的书", "iconCls":" ", "url":"/platform/export/makeBook/2018" }, { "id":20002, "text":"2019做的书", "iconCls":" ", "url":"/platform/export/makeBook/2019" }, { "id":20003, "text":"2020做的书", "iconCls":" ", "url":"/platform/export/makeBook/2020" } ] }, { "id":201, "text":"财务收入", "iconCls":"", "state":"closed", "checked":true, "children":[ { "id":20101, "text":"2018财务收入", "iconCls":" ", "url":"/platform/export/GMV/2018" }, { "id":20102, "text":"2019财务收入", "iconCls":" ", "url":"/platform/export/GMV/2019" }, { "id":20103, "text":"2020财务收入", "iconCls":" ", "url":"/platform/export/GMV/2020" }, ] }, { "id":202, "text":"财务支出", "iconCls":"", "state":"closed", "checked":true, "children":[ { "id":20201, "text":"2018财务支出", "iconCls":" ", "url":"/platform/export/expend/2018" }, { "id":20202, "text":"2019财务支出", "iconCls":" ", "url":"/platform/export/expend/2019" }, { "id":20203, "text":"2020财务支出", "iconCls":" ", "url":"/platform/export/expend/2020" }, ] }, ] }, ]class SiderNav extends React.Component { render() { return () }}```
推荐学习:《react视频教程》
Atas ialah kandungan terperinci react怎么实现三级菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!