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;