react + antd实现动态菜单

本文主要是介绍react + antd实现动态菜单，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

## react+antdUI实现动态菜单，记录。 


import React, { Component } from 'react';
import { Menu } from 'antd';
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}>{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}>{item.title}</Menu.Item> : null
                    })
                }
            </Menu>
        );
    }
}

export default SiderLeft;

调用：

import Siderleft from '../components/NavMenu/SiderLeft';
import { Layout } from 'antd';
const { Sider } = Layout;

<Sider>
    <Siderleft></Siderleft>
</Sider>

这篇关于react + antd实现动态菜单的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！