一、菜单组件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=<div></div>;
        let childArray=obj.child;
        if("undefined"!=typeof(childArray)&&childArray.length>0) {
          cHtml = childArray.map((item, i) => {
                return this.formSubmenusChild(item);
            });
            return <SubMenu key={obj.linkAddress} title={obj.name}>{cHtml}</SubMenu>
        }else{
            return <Menu.Item routeurl={obj.routeurl} key={obj.linkAddress}>{obj.name}</Menu.Item>
        }


    }
    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 <Menu.Item routeurl={obj.routeurl} key={obj.linkAddress}>{obj.name}</Menu.Item>
            }
        });

        return (
            <Menu theme="dark"
                onClick={this.handleClick.bind(this)}
                  style={{ width: 201}}
                  defaultOpenKeys={['sub1']}
                  selectedKeys={[backEndMenuUrl]}
                  mode="inline"
            >
                {html}
            </Menu>
        )
    }
}

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);