react使用antd组件递归实现左侧菜单导航树
2023-09-11 14:19:06 时间
案例结合递归+遍历实现二级导航
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);
结果:
相关文章
- 从连接器组件看 Tomcat 的线程模型
- vue 注册全局组件
- [React] Use react styled system with styled components
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- React组件继承,泛型写法
- react的3种组件
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- 利用 Jest 测试 React 组件
- Atitit easyui翻页组件与vue的集成解决方案attilax总结
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
- react创建组件值state
- mint-ui的search组件如何在键盘显示搜索按钮
- React学习笔记(三)—— 组件高级
- kettle的输入组件
- Go组件学习——gorm四步带你搞定DB增删改查
- 301-React Ext-React创建组件的三种方式及其区别
- 5.13 jmeter组件-非测试元件
- 软件测试技术之利用 Jest 为 React 组件编写单元测试
- 软件测试技术之利用 Jest 为 React 组件编写单元测试
- Canvas组件:画布,可以实现动画操作。
- Kubernetes基本概念与组件
- Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- Taro React组件开发(3) —— RuiRate 评论评分
- Taro React组件开发(1) —— Overlay 遮罩层【渐入渐出动画遮罩层】
- Kubernetes 核心组件 kubelet
- UVM基础-组件(driver、monitor、agent...)