react如何实现三级菜单

这篇文章主要讲解了“react如何实现三级菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何实现三级菜单”吧！

在成都做网站、成都网站设计、成都外贸网站建设过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联建站还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

react实现三级菜单的方法：1、创建展开三级父级菜单的方法为“onOpenChange = (openKeys) => {...}”；2、通过“handleSelectkeys(e){...}”设置选中状态；3、通过“oli.push(

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           if(data[i].children){
               var li = []
               for(var j=0;j                   var liData = data[i].children[j];
                   if(liData.children){
                       var oli = [];
                       for(var k=0;k                           oli.push(
                               
                                                                          {
                                           pathname:liData.children[k].url,
                                           state:{//三级菜单下传openKeys传两个值，展开两级
                                               parent:this.state.openKeys[0],
                                               child:this.state.openKeys[1]
                                           }
                                       }
                                   }>
                                       {liData.children[k].text}
                                   
                               
                           )
                       }
                       var oul = {liData.iconCls && }{liData.text}}>{oli};
                       li.push(oul);
                   }else{
                       li.push(
                           
                                                                  {
                                       pathname:liData.url,
                                       state:{//二级菜单下openKeys传一个值，展开一级
                                           parent:this.state.openKeys[0],
                                           // child:this.state.openKeys[1] ? this.state.openKeys[1] : ''
                                       }
                                   }
                                   
                                   } >
                                   {liData.iconCls && }
                                   {liData.text}
                               
                           
                       );
                   }
               }
               var ul = {data[i].iconCls && }{data[i].text}}>{li};
               html.push(ul);
           }else{
               html.push(
                   
                                                  {
                               pathname:data[i].url,
                               state:{//一级菜单下传空值，不展开菜单栏
                                   parent:''
                               }
                           }
                           } >
                           {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           if(data[i].children){
               for(var j=0;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           if(data[i].children){
               var li = []
               for(var j=0;j                   var liData = data[i].children[j];
                   if(liData.children){
                       var oli = [];
                       for(var k=0;k                           oli.push(
                               
                                                                          {
                                           pathname:liData.children[k].url,
                                           state:{//三级菜单下传openKeys传两个值，展开两级
                                               parent:this.state.openKeys[0],
                                               child:this.state.openKeys[1]
                                           }
                                       }
                                   }>
                                       {liData.children[k].text}
                                   
                               
                           )
                       }
                       var oul = {liData.iconCls && }{liData.text}}>{oli};
                       li.push(oul);
                   }else{
                       li.push(
                           
                                                                  {
                                       pathname:liData.url,
                                       state:{//二级菜单下openKeys传一个值，展开一级
                                           parent:this.state.openKeys[0],
                                           // child:this.state.openKeys[1] ? this.state.openKeys[1] : ''
                                       }
                                   }
                                   
                                   } >
                                   {liData.iconCls && }
                                   {liData.text}
                               
                           
                       );
                   }
               }
               var ul = {data[i].iconCls && }{data[i].text}}>{li};
               html.push(ul);
           }else{
               html.push(
                   
                                                  {
                               pathname:data[i].url,
                               state:{//一级菜单下传空值，不展开菜单栏
                                   parent:''
                               }
                           }
                           } >
                           {data[i].iconCls && }
                           {data[i].text}
                       
                   
               )
           }
       }
       return (
                          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}
           
       )
   }}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 (  
     
         
     
   )
 }}```

感谢各位的阅读，以上就是“react如何实现三级菜单”的内容了，经过本文的学习后，相信大家对react如何实现三级菜单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！