react + antd实现动态菜单

## react + antd实现动态菜单

import React, { Component } from 'react' ;
import { Menu } from  'antd' ;
import history from  'router/history' ;
const { SubMenu }  =  Menu;
interface Props {

}
type stateType  =  {
    menuList: {}[]
}
type itemType  =  {
    id:  '' ,
    path:  '',  //   页面跳转路劲 
    title: '',　　 //   菜单名称 
    icon: '',　　 //   图标 
    show:  boolean ,　　 //   是否显示该菜单 
    children: []　　 //   子级菜单 
 }
  //   模拟数据 
const mList =  [
    {
        id:  '01' ,
        path:  '' ,
        title:  '用户管理' ,
        icon:  '' ,
        show:   true  ,
        children: [
            {
                id:  '0101' ,
                path:  '' ,
                title:  '个人信息' ,
                icon:  '' ,
                show:   true  ,
                children: [
                    {
                        id:  '010101' ,
                        path:  '' ,
                        title:  '基本信息' ,
                        icon:  '' ,
                        show:   true  ,
                        children: []
                    },
                    {
                        id:  '010102' ,
                        path:  '' ,
                        title:  '附加信息' ,
                        icon:  '' ,
                        show:   false  ,
                        children: []
                    }
                ]
            }
        ]
    },
    {
        id:  '01' ,
        path:  '' ,
        title:  '角色管理' ,
        icon:  '' ,
        show:   false  ,
        children: []
    }
]
class SiderLeft extends Component <Props, stateType>  {
    constructor(props) {
        super(props);
        console.log( 'props' , props);
          this .state =  {
            menuList: mList
        }
          this .renderMenuItem.bind( this  );
    }
    renderMenuItem(navList: {}[]) {
          return  navList.map((item: itemType, index: number) =>  {
              if (item.children &&  item.children.length){
                  return  item.show ? <SubMenu key={item.id + index} title={item.title}> 
                {   this  .renderMenuItem(item.children) }
                 </SubMenu> : null
             }
              return  item.show ? <Menu.Item key={item.id + index} onClick={() => { history.push(item.path) }}>{item.title}</Menu.Item> : null
         })
    }
    render() {
        
          return   (
             <Menu theme="dark" mode="inline"> 
                {
                      this .state.menuList.map((item: itemType, index: number) =>  {
                          if (item.children &&  item.children.length){
                              return  item.show ? <SubMenu  key={item.id + index} title={item.title}> 
                            {   this  .renderMenuItem(item.children) }
                             </SubMenu> : null
                         }
                          return  item.show ? <Menu.Item key={item.id + index} onClick={() => { history.push(item.path) }}>{item.title}</Menu.Item> : null
                     })
                }
             </Menu>
         );
    }
}

export   default  SiderLeft;

history.js

import { createHashHistory } from 'history' ;
const history  =  createHashHistory();
export   default  history;

 

查看更多关于react + antd实现动态菜单的详细内容...