Reactで3レベルのメニューを実装する方法

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] : [], }); } } }選択したものを設定state
 
 
 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  {liData.children[k].text}   ) } var oul = {liData.iconCls && }{liData.text}}>{oli}; li.push(oul); }else{ li.push(   {liData.iconCls && } {liData.text}   ); } } var ul = {data[i].iconCls && }{data[i].text}}>{li}; html.push(ul); }else{ html.push(   {data[i].iconCls && } {data[i].text}   ) } }

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 && }{liData.text}}>{oli}; li.push(oul); }else{ li.push(   {liData.iconCls && } {liData.text}   ); } } var ul = {data[i].iconCls && }{data[i].text}}>{li}; html.push(ul); }else{ html.push(   {data[i].iconCls && } {data[i].text}   ) } } return (
           
            {html}
           ) }}export default withRouter(Menus);
          

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 (    ) }}```