zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    使用特殊构造的5GB文件测试Win2012Dedup功能
    VMWare 回收磁盘空间
    一个极其高效的虚拟机内存冗余消除机制:UKSM
    基于Dedup的数据打包技术
    hadoop集群运行dedup实现去重功能
    Qt编写安防视频监控系统24-自定义悬浮条
    Qt编写百度地图综合应用(在线+离线+区域)
    Qt编写安防视频监控系统23-图片地图
    Qt编写安防视频监控系统22-摄像机搜索
    Qt编写安防视频监控系统21-摄像机管理
  • 原文地址:https://www.cnblogs.com/min77/p/14677690.html
Copyright © 2011-2022 走看看