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

最新推荐文章于 2024-08-20 15:28:42 发布

I NFINIT Y

最新推荐文章于 2024-08-20 15:28:42 发布

阅读量2.9k

点赞数 2

文章标签： antd 递归菜单 react

本文链接：https://blog.csdn.net/weixin_43021174/article/details/85169638

版权

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