使用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((<Router history={hashHistory}><Route path="/" component={App}><IndexRoute component={Text1}/><Route path="/menu" component={Menu}/><Route path="/text1" component={Text1}/><Route path="/text2" component={Text2}/><Route path="/text1_1" component={Text1_1}/><Route path="/text1_2" component={Text1_2}/><Route path="/text1_3" component={Text1_3}/><Route path="/text1_4" component={Text1_4}/><Route path="/text2_1" component={Text2_1}/><Route path="/text2_2" component={Text2_2}/><Route path="/text2_3_1" component={Text2_3_1}/><Route path="/text2_3_2" component={Text2_3_2}/></Route> </Router>), 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 (<div><nav><h3>总菜单</h3><Sider/></nav>{this.props.children}</div>)}}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 (            <Menu onClick={this.handleClick.bind(this)}        style={{ width: 240 }}        openKeys={this.state.openKeys}        onOpen={this.onToggle.bind(this)}        onClose={this.onToggle.bind(this)}        selectedKeys={[this.state.current]}        mode="inline">        {          arr.map((item, index) => {            return <SubMenu key={item.bigMenu} title={<span><Icon type="setting" /><span>{item.bigMenu}</span></span>}>              {                item.smallMenu.map((o, i) => {                  if (o instanceof Object) {                    return <SubMenu key={o.bigMenu} title={<span><Icon type="setting" /><span>{o.bigMenu}</span></span>}>                      {                        o.smallMenu.map((j, k)=> {                          return <Menu.Item key={j}>{j}</Menu.Item>                        })                      }                    </SubMenu>                  } else {                    return <Menu.Item key={o}>{o}</Menu.Item>                  }                })              }            </SubMenu>          })        }      </Menu>    );  }};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 (<h3>你好，这里是text1_2</h3>)}} export default Text1_2;

效果如下图：