react如何實現(xiàn)三級菜單
這篇文章主要講解了“react如何實現(xiàn)三級菜單”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react如何實現(xiàn)三級菜單”吧！
在成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標受眾和市場情況進行定位分析，以確定網(wǎng)站的風格、色彩、版式、交互等方面的設(shè)計方向。創(chuàng)新互聯(lián)建站還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設(shè)計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。
react實現(xiàn)三級菜單的方法：1、創(chuàng)建展開三級父級菜單的方法為“onOpenChange = (openKeys) => {...}”；2、通過“handleSelectkeys(e){...}”設(shè)置選中狀態(tài)；3、通過“oli.push(<Menu.Item key={...})實現(xiàn)生成側(cè)邊欄即可。
react + antd實現(xiàn)只展開一個父級菜單欄的側(cè)邊欄（三級菜單欄）
展開三級父級菜單的方法
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] : [],
});
}
}
}
設(shè)置選中狀態(tài)
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
});
}
}
生成側(cè)邊欄
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>
)
}
}
側(cè)邊欄組件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 //判斷是否已經(jīng)展開，如已展開停止重新賦值避免重新渲染和關(guān)系菜單
}
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+"");
}
}
// 刷新菜單更新默認狀態(tài)
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],
})
}
// 瀏覽器前進后退按鈕更新菜單狀態(tài)
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);
側(cè)邊欄數(shù)據(jù) 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":"數(shù)據(jù)預(yù)覽導(dǎo)出",
"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":"財務(wù)收入",
"iconCls":"",
"state":"closed",
"checked":true,
"children":[
{
"id":20101,
"text":"2018財務(wù)收入",
"iconCls":" ",
"url":"/platform/export/GMV/2018"
},
{
"id":20102,
"text":"2019財務(wù)收入",
"iconCls":" ",
"url":"/platform/export/GMV/2019"
},
{
"id":20103,
"text":"2020財務(wù)收入",
"iconCls":" ",
"url":"/platform/export/GMV/2020"
},
]
},
{
"id":202,
"text":"財務(wù)支出",
"iconCls":"",
"state":"closed",
"checked":true,
"children":[
{
"id":20201,
"text":"2018財務(wù)支出",
"iconCls":" ",
"url":"/platform/export/expend/2018"
},
{
"id":20202,
"text":"2019財務(wù)支出",
"iconCls":" ",
"url":"/platform/export/expend/2019"
},
{
"id":20203,
"text":"2020財務(wù)支出",
"iconCls":" ",
"url":"/platform/export/expend/2020"
},
]
},
]
},
]class SiderNav extends React.Component {
render() {
return (
<Sider width={230} breakpoint className="AdminSider">
<Menus list={list} />
</Sider>
)
}}```感謝各位的閱讀，以上就是“react如何實現(xiàn)三級菜單”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對react如何實現(xiàn)三級菜單這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
文章題目：react如何實現(xiàn)三級菜單
當前鏈接：http://aaarwkj.com/article10/jeghdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 給公司做網(wǎng)站不能以價格為導(dǎo)向 2016-10-29
- 我們在做網(wǎng)站建設(shè)的時候怎樣選擇及布局關(guān)鍵詞 2014-10-25
- 深圳網(wǎng)站建設(shè)哪家好，深圳做網(wǎng)站多少錢？ 2022-11-07
- 公司做網(wǎng)站需要多少錢？做網(wǎng)站費用跟需求有關(guān) 2016-12-11
- 如何學做網(wǎng)站 簡單幾步教會你 2021-05-03
- 網(wǎng)站的用戶體驗主要圍繞哪些方面來做？ 2014-04-01
- 做網(wǎng)站的形象設(shè)計可以從以下幾點出發(fā) 2022-08-08
- 現(xiàn)在做網(wǎng)站設(shè)計都有哪些風格？ 2021-12-06
- 做網(wǎng)站之前應(yīng)該了解哪些網(wǎng)站建設(shè)基本知識 2022-11-18
- 如何做好用戶體驗 2016-05-20
- 如何選擇做網(wǎng)站的公司? 2022-07-17
- 做網(wǎng)站建設(shè)用網(wǎng)站排名seo優(yōu)化賺錢方法 2021-08-09