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);

结果：