react使用antd组件递归实现左侧菜单导航树

案例结合递归+遍历实现二级导航

import React from 'react'
import { Menu, Icon } from 'antd';
import './index.less';
import MenuConfig from './../../config/menuconfig';  //导入数据
const SubMenu = Menu.SubMenu;

export default class NavLeft extends React.Component{
  componentWillMount() {
    const menuTreeNode = this.renderMenu(MenuConfig);
    this.setState({
      menuTreeNode
    })
  }
  // 递归实现----菜单渲染
renderMenu = (data) => {
  return data.map((item)=>{
    if(item.children){
      return <SubMenu  key={item.key} title={item.title}>
      { this.renderMenu(item.children) }
      </SubMenu>
    }
    return <Menu.Item key={item.key} title={item.title}>{item.title}</Menu.Item>
  })
}
  render() {
    return(
      <div className='nav'>
      <div className='logo'>
      <img src='/assets/logo-ant.svg'/>
      <h3>MS</h3>
      </div>
      <Menu theme='dark'>
         {this.state.menuTreeNode}
      </Menu>
      </div>
    )
  }
}

案例2：

/** 左侧导航组件 */
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 LogoImg from '../../assets/imgs/logo.jpg'
/** 导航配置信息列表（这里我们可以导入命名为menuConfigList） */
import menuConfigList from '../../config/menuConfig'/** 注意：export default默认暴露的可以命名为任意值 */
/** Antd布局组件 */
const { Sider } = Layout;
const { SubMenu } = Menu;

class LeftNav 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 (
            <div className="left-main-nav">
                <Layout className="main-layout">
                    <Sider collapsed={this.state.collapsed} className="main-layout-sider">
                        <header>
                            <Link to="/">
                                <Menu className="logo-menu">
                                   <Menu.Item key="2" className="logo-area">
                                        <img src={LogoImg} alt="后台首页" />
                                        <h2 style={{opacity:this.state.h2Opacity}}>后台管理</h2>
                                    </Menu.Item> 
                                </Menu>    
                                
                            </Link>
                        </header>
                        <Button type="primary" onClick={this.toggleCollapsed}>
                            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                        </Button>
                        <Menu
                            defaultSelectedKeys={[defaultSelectedKeysPathname]} /** 初始展开的 SubMenu 菜单项 key 数组 */
                            defaultOpenKeys={['sub1']}/** 初始选中的菜单项 key 数组 */
                            mode="inline"
                            theme="dark"
                        >
                            { this.getMenuNodes(menuConfigList) }{/* 后期涉及权限，所以这里采用遍历+递归 */}</Menu>
                    </Sider>
                </Layout>
            </div>
        )
    }
    getMenuNodes = (data) => {
        return data.map( item => {
            if(!item.children){
                return (
                    <Menu.Item key={item.menu_path}>
                         <Link to={item.menu_path}>
                            <Icon type={item.icon}></Icon>
                            <span>{item.title}</span>
                         </Link>
                    </Menu.Item>
                )
            }else{
                return (
                    <SubMenu
                        key={item.menu_path}
                        title={
                            <span>
                                <Icon type={item.icon}></Icon>
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        { this.getMenuNodes(item.children) }{/* 递归调用，渲染二级列表 */}
                    </SubMenu>
                )
            }
        })
    }
}


export default withRouter(LeftNav);

结果：