react使用antd组件递归实现左侧菜单导航树
时间:2020-03-27
本文章向大家介绍react使用antd组件递归实现左侧菜单导航树,主要包括react使用antd组件递归实现左侧菜单导航树使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例结合递归+遍历实现二级导航
import React from 'react' import { Menu, Icon } from 'antd'; import './index.less'; import MenuConfig from './../../config/menuconfig'; //导入数据 const SubMenu = Menu.SubMenu; export default class NavLeft extends React.Component{ componentWillMount() { const menuTreeNode = this.renderMenu(MenuConfig); this.setState({ menuTreeNode }) } // 递归实现----菜单渲染 renderMenu = (data) => { return data.map((item)=>{ if(item.children){ return <SubMenu key={item.key} title={item.title}> { this.renderMenu(item.children) } </SubMenu> } return <Menu.Item key={item.key} title={item.title}>{item.title}</Menu.Item> }) } render() { return( <div className='nav'> <div className='logo'> <img src='/assets/logo-ant.svg'/> <h3>MS</h3> </div> <Menu theme='dark'> {this.state.menuTreeNode} </Menu> </div> ) } }
案例2:
/** 左侧导航组件 */ import React, { Component } from 'react' import { Link, withRouter } from 'react-router-dom'/**react自行传入路由参数---withRouter组件 */ import { Layout, Menu, Button, Icon } from 'antd'; import { MenuUnfoldOutlined, MenuFoldOutlined, HomeOutlined, ShopOutlined, SettingOutlined, UserOutlined, AppstoreOutlined } from '@ant-design/icons'; import './index.less' import LogoImg from '../../assets/imgs/logo.jpg' /** 导航配置信息列表(这里我们可以导入命名为menuConfigList) */ import menuConfigList from '../../config/menuConfig'/** 注意:export default默认暴露的可以命名为任意值 */ /** Antd布局组件 */ const { Sider } = Layout; const { SubMenu } = Menu; class LeftNav extends Component { constructor(props) { super(props); this.state = { collapsed: false, h2Opacity:true } } toggleCollapsed = () => { console.log(this.state.collapsed) this.setState({ collapsed: !this.state.collapsed, h2Opacity: Number(!this.state.h2Opacity) }) } render() { const defaultSelectedKeysPathname = this.props.location.pathname.slice(1) return ( <div className="left-main-nav"> <Layout className="main-layout"> <Sider collapsed={this.state.collapsed} className="main-layout-sider"> <header> <Link to="/"> <Menu className="logo-menu"> <Menu.Item key="2" className="logo-area"> <img src={LogoImg} alt="后台首页" /> <h2 style={{opacity:this.state.h2Opacity}}>后台管理</h2> </Menu.Item> </Menu> </Link> </header> <Button type="primary" onClick={this.toggleCollapsed}> {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)} </Button> <Menu defaultSelectedKeys={[defaultSelectedKeysPathname]} /** 初始展开的 SubMenu 菜单项 key 数组 */ defaultOpenKeys={['sub1']}/** 初始选中的菜单项 key 数组 */ mode="inline" theme="dark" > { this.getMenuNodes(menuConfigList) }{/* 后期涉及权限,所以这里采用遍历+递归 */}</Menu> </Sider> </Layout> </div> ) } getMenuNodes = (data) => { return data.map( item => { if(!item.children){ return ( <Menu.Item key={item.menu_path}> <Link to={item.menu_path}> <Icon type={item.icon}></Icon> <span>{item.title}</span> </Link> </Menu.Item> ) }else{ return ( <SubMenu key={item.menu_path} title={ <span> <Icon type={item.icon}></Icon> <span>{item.title}</span> </span> } > { this.getMenuNodes(item.children) }{/* 递归调用,渲染二级列表 */} </SubMenu> ) } }) } } export default withRouter(LeftNav);
结果:
原文地址:https://www.cnblogs.com/jianxian/p/12583648.html
- python接口自动化11-post传data参数案例
- POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
- python接口自动化12-案例分析(csrfToken)
- Python基础学习笔记
- POJ 3278 Catch That Cow(BFS,板子题)
- 【请您听我说】PHP语法特点的一些看法
- 喵哈哈村的魔法考试 Round #1 (Div.2) 题解&源码(A.水+暴力,B.dp+栈)
- 查找第k小的元素(O(n)递归解法)
- C/C++对bool operator < (const p &a)const的认识,运算符重载详解(杂谈)
- C/C++中substr函数的应用(简单讲解)
- C++ STL学习之容器set和multiset (补充材料)
- Codeforces Round #410 (Div. 2)(A,字符串,水坑,B,暴力枚举,C,思维题,D,区间贪心)
- 关于int *a[常量]与int (*a)[常量]的分析与区分(详解)
- python笔记3-发送邮件(smtplib)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何使用k3OS和Argo进行自动化边缘部署?
- 设计模式总篇:从为什么需要原则到实际落地(附知识图谱)
- 一文入门DNS?从访问GitHub开始
- 没内鬼,来点干货!SQL优化和诊断
- 好像很厉害的生成器!一秒钟搞定一个项目
- 【一起学系列】之策略模式:好多鸭子啊
- 没内鬼,来点干货!volatile和synchronized
- 【一起学系列】之观察者模式:我没有在监控你啊
- Celery 4 初体验及踩坑
- MySQL 最佳实践:gh-ost 工具使用详解
- 如何将 Hexo 博客部署到云开发静态网站托管
- WordPress 静态化部署到云开发网站托管
- 如何用云应用快速部署一个nodebb的开源论坛
- 【一起学系列】之装饰器模式:不改代码增强功能?
- Hello!GitHub 好用好玩值得收藏的开源项目集合~