react 树形菜单_react使用antd组件递归实现左侧菜单导航树

/** 左侧导航组件*/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 LogoImgfrom '../../assets/imgs/logo.jpg'

/** 导航配置信息列表(这里我们可以导入命名为menuConfigList) */

import menuConfigList from '../../config/menuConfig'/** 注意:export default默认暴露的可以命名为任意值 */

/** Antd布局组件*/

const { Sider } =Layout;const { SubMenu } =Menu;classLeftNav 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(

后台首页

后台管理

{React.createElement(this.state.collapsed ?MenuUnfoldOutlined : MenuFoldOutlined)}

defaultSelectedKeys={[defaultSelectedKeysPathname]} /** 初始展开的 SubMenu 菜单项 key 数组*/defaultOpenKeys={['sub1']}/** 初始选中的菜单项 key 数组*/mode="inline"theme="dark"

>{ this.getMenuNodes(menuConfigList) }{/* 后期涉及权限,所以这里采用遍历+递归 */}

)

}

getMenuNodes= (data) => {

return data.map( item => {

if(!item.children){

return (

{item.title}

)

}else{

return (

key={item.menu_path}

title={

{item.title}

}

>

{ this.getMenuNodes(item.children) }{/* 递归调用,渲染二级列表 */}

)

}

})

}

}

exportdefault withRouter(LeftNav);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值