使用antd创建一个3级联动菜单栏

Index.jsx

import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';
import { Link } from 'react-router';

import { Router, Route, Redirect, IndexRoute } from 'react-router';
import { hashHistory, browserHistory } from 'react-router'

import Menu from '../component/Menu';
import Text1 from '../component/Text1';
import Text2 from '../component/Text2';
import Text1_1 from '../component/Text1_1';
import Text1_2 from '../component/Text1_2';
import Text1_3 from '../component/Text1_3';
import Text1_4 from '../component/Text1_4';
import Text2_1 from '../component/Text2_1';
import Text2_2 from '../component/Text2_2';
import Text2_3_1 from '../component/Text2_3_1';
import Text2_3_2 from '../component/Text2_3_2';

ReactDOM.render((
		
			
				
				
				
				
				
				
				
				
				
				
				
				
			 
		
	), document.getElementById('react-content'));

App.jsx

import React from 'react';
import { Link } from 'react-router';
import './App.less';
import Menu from '../component/Menu';
import Sider from '../component/Sider';

class App extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			

				

					
总菜单
					
				
				{this.props.children}
				
			
		)
	}
}

export default App;

Sider.jsx

import React from 'react';
import { Menu, Icon } from 'antd';
import { Component } from 'react';
import { Link } from 'react-router';

const SubMenu = Menu.SubMenu;

const arr = [
  {
    bigMenu: "menu1",
    smallMenu: ["text1_1", "text1_2", "text1_3", "text1_4"],
  },
  {
    bigMenu: "menu2",
    smallMenu: ["text2_1", "text2_2", {bigMenu: "subMenu2", smallMenu: ["text2_3_1", "text2_3_2"]}],
  },
];

class Sider extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      current: '',
      openKeys: [],
    };
    // this.setState({
    //   current: '1',
    //   openKeys: [],
    // }).bind(this);
  }
  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
      openKeys: e.keyPath.slice(1),
    });
    console.log(this.state.openKeys + this.state.current);
    window.location.hash = e.key;
  }
  onToggle(info) {
    this.setState({
      openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
    }); 
  }
  render() {
    return (
      



      
        {
          arr.map((item, index) => {
            return {item.bigMenu}}>
              {
                item.smallMenu.map((o, i) => {
                  if (o instanceof Object) {
                    return {o.bigMenu}}>
                      {
                        o.smallMenu.map((j, k)=> {
                          return {j}
                        })
                      }
                    
                  } else {
                    return {o}
                  }
                })
              }
            
          })
        }
      


    );
  }
};

export default Sider;

Text1_2(以外的Text和这个类似，就不一一列出了)

import React from 'react';
import { Component } from 'react';
import { Link } from 'react-router';

class Text1_2 extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			
你好，这里是text1_2
		)
	}
} 

export default Text1_2;

效果如下图：