遞歸樹法，react 樹形菜單_react使用antd組件遞歸實現左側菜單導航樹

/** 左側導航組件*/import React, { Component }from 'react'import { Link, withRouter }from 'react-router-dom'/**react自行傳入路由參數---withRouter組件*/import { Layout, Menu, Button, Icon }from 'antd';

import {

MenuUnfoldOutlined,

MenuFoldOutlined,

HomeOutlined,

遞歸樹法？ShopOutlined,

SettingOutlined,

UserOutlined,

AppstoreOutlined

}from '@ant-design/icons';

import'./index.less'import LogoImgfrom '../../assets/imgs/logo.jpg'

react路由切換組件側導航？/** 導航配置信息列表(這里我們可以導入命名為menuConfigList) */

import menuConfigList from '../../config/menuConfig'/** 注意：export default默認暴露的可以命名為任意值 */

/** Antd布局組件*/

const { Sider } =Layout;const { SubMenu } =Menu;classLeftNav extends Component {

constructor(props) {

super(props);this.state ={

react重新加載組件、collapsed:false,

h2Opacity:true}

}

toggleCollapsed= () =>{

console.log(this.state.collapsed)this.setState({

collapsed:!this.state.collapsed,

react 自定義組件？h2Opacity: Number(!this.state.h2Opacity)

})

}

render() {const defaultSelectedKeysPathname = this.props.location.pathname.slice(1)return(

}

getMenuNodes= (data) => {

return data.map( item => {

if(!item.children){

return (

遞歸遍歷，{item.title}

)

}else{

return (

key={item.menu_path}

遞歸、title={

{item.title}

}

>

{ this.getMenuNodes(item.children) }{/* 遞歸調用，渲染二級列表 */}

}

react grid。})

}

}

exportdefault withRouter(LeftNav);