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'

/** 导航配置信息列表(这里我们可以导入命名为menuConfigList) */

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

/** Antd布局组件*/

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

constructor(props) {

super(props);this.state ={

collapsed:false,

h2Opacity:true}

}

toggleCollapsed= () =>{

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

collapsed:!this.state.collapsed,

h2Opacity: Number(!this.state.h2Opacity)

})

}

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

后台管理

{React.createElement(this.state.collapsed ?MenuUnfoldOutlined : MenuFoldOutlined)}

defaultSelectedKeys={[defaultSelectedKeysPathname]} /** 初始展开的 SubMenu 菜单项 key 数组*/defaultOpenKeys={['sub1']}/** 初始选中的菜单项 key 数组*/mode="inline"theme="dark"

>{ this.getMenuNodes(menuConfigList) }{/* 后期涉及权限，所以这里采用遍历+递归 */}

)

}

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) }{/* 递归调用，渲染二级列表 */}

)

}

})

}

}

exportdefault withRouter(LeftNav);