react 树形菜单_关于React 使用antd组件递归实现左侧菜单导航树（MenusTree）的示例...

一、菜单组件Demo

这里本人采用的是蚂蚁金服(antd)组件库里的{Menu}组件写的一个左侧菜单树的小Demo(整套开发环境是React+Redux+webpack)

import React from 'react';

import { Menu, Icon } from 'antd';

import {WeaScroll} from 'ecCom';

import {bindActionCreators} from 'redux';

import {connect} from 'react-redux';

import * as themeActions from '../../../actions/theme';

const SubMenu = Menu.SubMenu;

class E9LeftMenusTree extends React.Component{

componentWillMount() {

}

//递归函数生成左侧菜单树

//这里通过函数的形式，通过递归自身function的方式来生成菜单树的子菜单

formSubmenusChild(obj){

let cHtml=

let childArray=obj.child;

if("undefined"!=typeof(childArray)&&childArray.length>0) {

cHtml = childArray.map((item, i) => {

return this.formSubmenusChild(item);

});

return {cHtml}

}else{

return

}

}

handleClick(e) {

const {actions}=this.props;

let menuInfo={

//打印antd Menu组件的onClick返回值(e)可以看出通过e.item.props来获取我们item组件的自定义属性

routeurl:e.item.props.routeurl,

url: e.key,

target:'mainFrame'

}

//根据route路由地址和iframe地址的值判断使用哪个作为菜单页面展示方式

actions.onLoadMain(menuInfo);

}

render() {

const {columnMenuInfo,backEndMenuUrl} = this.props;

let columnMenus=columnMenuInfo.toJSON();

let html=columnMenus.map((obj,i)=> {

if ("undefined"!=typeof(obj.child)&&obj.child.length>0) {

return this.formSubmenusChild(obj);

} else {

//这里的routeurl是路由地址，是自定义的一个属性

return

}

});

return (

onClick={this.handleClick.bind(this)}

style={{ width: 201}}

defaultOpenKeys={['sub1']}

selectedKeys={[backEndMenuUrl]}

mode="inline"

>

{html}

)

}

}

function mapStateToProps(state) {

const {middleTheme} = state;

return {

backEndMenuUrl: middleTheme.get('backEndMenuUrl'),

columnMenuInfo:middleTheme.get('columnMenuInfo')

}

}

function mapDispatchToProps(dispatch) {

return {

actions: bindActionCreators(themeActions, dispatch)

};

}

module.exports = connect(mapStateToProps, mapDispatchToProps)(E9LeftMenusTree);