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

結果：