站長資訊網
react實現三級菜單的方法：1、創建展開三級父級菜單的方法為“onOpenChange = (openKeys) => {…}”；2、通過“handleSelectkeys(e){…}”設置選中狀態；3、通過“oli.push(<Menu.Item key={…})實現生成側邊欄即可。
本教程操作環境：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 }); } }
登錄后復制
生成側邊欄
const data = this.props.list; var html = []; for(var i=0;i<data.length;i++){ if(data[i].children){ var li = [] for(var j=0;j<data[i].children.length;j++){ var liData = data[i].children[j]; if(liData.children){ var oli = []; for(var k=0;k<liData.children.length;k++){ oli.push( <Menu.Item key={liData.children[k].url}> <Link to={ { pathname:liData.children[k].url, state:{//三級菜單下傳openKeys傳兩個值，展開兩級 parent:this.state.openKeys[0], child:this.state.openKeys[1] } } }> <span>{liData.children[k].text}</span> </Link> </Menu.Item> ) } var oul = <SubMenu key={liData.id} title={<span>{liData.iconCls && <Icon type={liData.iconCls} />}<span>{liData.text}</span></span>}>{oli}</SubMenu>; li.push(oul); }else{ li.push( <Menu.Item key={liData.url}> <Link to={ { pathname:liData.url, state:{//二級菜單下openKeys傳一個值，展開一級 parent:this.state.openKeys[0], // child:this.state.openKeys[1] ? this.state.openKeys[1] : '' } } } > {liData.iconCls && <Icon type={liData.iconCls} />} <span>{liData.text}</span> </Link> </Menu.Item> ); } } var ul = <SubMenu key={data[i].id} title={<span>{data[i].iconCls && <Icon type={data[i].iconCls} />}<span>{data[i].text}</span></span>}>{li}</SubMenu>; html.push(ul); }else{ html.push( <Menu.Item key={data[i].url}> <Link to={ { pathname:data[i].url, state:{//一級菜單下傳空值，不展開菜單欄 parent:'' } } } > {data[i].iconCls && <Icon type={data[i].iconCls} />} <span>{data[i].text}</span> </Link> </Menu.Item> ) } }
登錄后復制
側邊欄組件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<data.length;i++){ if(data[i].children){ for(var j=0;j<data[i].children.length;j++){ var liData = data[i].children[j]; if(liData.children){ this.state.rootSubmenuKeys.push(liData.id+""); } } this.state.rootSubmenuKeys.push(data[i].id+""); } } // 刷新菜單更新默認狀態 const { pathname } = this.props.history.location; const rank = pathname.split('/') switch (rank.length) { case 2 : //一級目錄 this.setState({ selectedKeys: [pathname] }) break; case 5 : //三級目錄，要展開兩個subMenu this.setState({ selectedKeys: [pathname], }) break; default : this.setState({ selectedKeys: [pathname], }) } // 瀏覽器前進后退按鈕更新菜單狀態 if (window.history && window.history.pushState) { window.onpopstate = function () { window.location.reload(true); //刷新頁面 }; } } 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 }); } } 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] : [], }); } } } render(){ const data = this.props.list; var html = []; for(var i=0;i<data.length;i++){ if(data[i].children){ var li = [] for(var j=0;j<data[i].children.length;j++){ var liData = data[i].children[j]; if(liData.children){ var oli = []; for(var k=0;k<liData.children.length;k++){ oli.push( <Menu.Item key={liData.children[k].url}> <Link to={ { pathname:liData.children[k].url, state:{//三級菜單下傳openKeys傳兩個值，展開兩級 parent:this.state.openKeys[0], child:this.state.openKeys[1] } } }> <span>{liData.children[k].text}</span> </Link> </Menu.Item> ) } var oul = <SubMenu key={liData.id} title={<span>{liData.iconCls && <Icon type={liData.iconCls} />}<span>{liData.text}</span></span>}>{oli}</SubMenu>; li.push(oul); }else{ li.push( <Menu.Item key={liData.url}> <Link to={ { pathname:liData.url, state:{//二級菜單下openKeys傳一個值，展開一級 parent:this.state.openKeys[0], // child:this.state.openKeys[1] ? this.state.openKeys[1] : '' } } } > {liData.iconCls && <Icon type={liData.iconCls} />} <span>{liData.text}</span> </Link> </Menu.Item> ); } } var ul = <SubMenu key={data[i].id} title={<span>{data[i].iconCls && <Icon type={data[i].iconCls} />}<span>{data[i].text}</span></span>}>{li}</SubMenu>; html.push(ul); }else{ html.push( <Menu.Item key={data[i].url}> <Link to={ { pathname:data[i].url, state:{//一級菜單下傳空值，不展開菜單欄 parent:'' } } } > {data[i].iconCls && <Icon type={data[i].iconCls} />} <span>{data[i].text}</span> </Link> </Menu.Item> ) } } return ( <Menu openKeys={this.state.openKeys} selectedKeys={[this.props.history.location.pathname]} onClick={this.handleSelectkeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" collapsed={this.state.collapsed}> {html} </Menu> ) }}export default withRouter(Menus);
登錄后復制
側邊欄數據 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 ( <Sider width={230} breakpoint className="AdminSider"> <Menus list={list} /> </Sider> ) }}```
登錄后復制
推薦學習：《react視頻教程》
