基于antd,实现左侧导航栏

2 篇文章 0 订阅

主要总结基于antd实现的左侧导航栏,样式类型为:只展开当前父级菜单,点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。
在这里插入图片描述
含有子集导航的导航条的实现原理为递归实现,判断当前遍历项是否含有子集,若有则再次调用函数进行遍历,同时返回,这个标签代表的是含有子集的父级菜单,若不存在子集,那么直接输入菜单的每一项<Menu.Item>{item.title}</Menu.Item>,注意这里直接输出的时候,导航的名称是需要填写在标签之中的
上代码:(这里的antd,是已经配置过按需加载的)

import React,{Component} from 'react'
import MenuConfig from '../../config/menuConfig'
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

export default class NavLeft extends Component{
    rootSubmenuKeys=[]
    state = {
      openKeys: [],
    };
  // 点击时切换展开项
    onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(key => 
        this.state.openKeys.indexOf(key) === -1
    );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.setState({ openKeys });
      } else {
        this.setState({
          openKeys: latestOpenKey ? [latestOpenKey] : [],
        });
      }
    }
    componentWillMount(){
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode:menuTreeNode
        })
    }
    // 左边导航栏渲染(原理,通过递归的方式进行渲染)
    renderMenu = (data)=>{
        return data.map((item)=>{
            if(item.children){//当有子集存在的时候,需要再次调用遍历
                this.rootSubmenuKeys.push(item.key)
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                ) 
            }
            return (
                <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
            )
        })
    }
    render(){
        return(
            <div>
                <div className='logo'>
                    <img src="" alt=""/>
                    <h1>CMMM</h1>
                </div>
                <Menu
                theme='dark'
                mode="inline"
                openKeys={this.state.openKeys}
                onOpenChange={this.onOpenChange}
                >
                {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}

此处的导航栏的数据是从外部引入的,原数据为:

const MenuConfig = [
    {
        title:'首页',
        key:'/admin/home'
    },
    {
        title:'UI',
        key:'/ui',
        children:[
            {
                title: '按钮',
                key: '/ui/buttons',
            },
            {
                title: '弹框',
                key: '/ui/modals',
            },
            {
                title: 'Loading',
                key: '/ui/loadings',
            },
            {
                title: '通知提醒',
                key: '/ui/notification',
            },
            {
                title: '全局Message',
                key: '/ui/messages',
            },
            {
                title: 'Tab页签',
                key: '/ui/tabs',
            },
            {
                title: '图片画廊',
                key: '/ui/gallery',
            },
            {
                title: '轮播图',
                key: '/ui/carousel',
            }            
        ]        
    },
    {
        title:'表单',
        key:'/from',
        children: [
            {
                title: '登录',
                key: '/form/login',
            },
            {
                title: '注册',
                key: '/form/reg',
            }
        ]       
    },
    {
        title:'表格',
        key:'/table',
        children: [
            {
                title: '基础表格',
                key: '/table/basic',
            },
            {
                title: '高级表格',
                key: '/table/high',
            }
        ]        
    },
    {
        title:'富文本',
        key:'/rich'        
    },
    {
        title:'城市管理',
        key:'/city'        
    },
    {
        title:'订单管理',
        key:'/order',
        btnList: [
            {
                title: '订单详情',
                key: 'detail'
            },
            {
                title: '结束订单',
                key: 'finish'
            }
        ]              
    },
    {
        title:'员工管理',
        key:'/user'        
    },
    {
        title:'车辆地图',
        key:'/bikeMap'        
    },
    {
        title:'图标',
        key:'/charts',
        children: [
            {
                title: '柱形图',
                key: '/charts/bar'
            },
            {
                title: '饼图',
                key: '/charts/pie'
            },
            {
                title: '折线图',
                key: '/charts/line'
            },
        ]       
    },
    {
        title: '权限设置',
        key: '/permission'
    },
]

export default MenuConfig;
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值