使用antd UI 制作菜单

antd 主页地址：https://ant.design/docs/react/introduce

在使用过程中，不能照搬antd的组件代码，因为有些并不合适。首先，菜单并没有做跳转功能，仅仅是菜单，需要在它的基础方法中添加我们的业务代码。

/*菜单组件，所有的方法都要bind this*/

import React,{Component} from 'react';
import {render} from 'react-dom';
import {Link,browserHistory} from 'react-router';

import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

import {user_search_path,
        application_search_path,navigation_search,advertising_search} from 'config';

export default class Sidebar extends Component{
    constructor(props){
        super(props);
        this.state = {
            current: '1',
            openKeys: []
        }
    }

    handleClick(e) {
       /*这里要做判断，判断是点击哪个菜单，就跳转到相应的菜单内容，使用router进行跳转*/
        if(e.key == "1"){
            browserHistory.push(user_search_path);
        }else if(e.key == '2'){
            browserHistory.push(application_search_path);
        }else if(e.key == '3'){
            browserHistory.push(navigation_search);
        }else if(e.key == '4'){
            browserHistory.push(advertising_search);
        }

        this.setState({
            current: e.key,
            openKeys: e.keyPath.slice(1)
        });
    }

    onToggle(info) {
        console.log('onToggle', info);
        this.setState({
            openKeys: info.open ? info.keyPath : info.keyPath.slice(1)
        });
    }

    getKeyPath(key) {
        const map = {
            sub1: ['sub1'],
            sub2: ['sub2'],
            sub3: ['sub2', 'sub3'],
            sub4: ['sub4'],
        };
        return map[key] || [];
    }

    render(){

        return(
            <div>
                <Menu
                    mode="inline"
                    openKeys={this.state.openKeys}
                    selectedKeys={[this.state.current]}
                    style={{ width: 230 }}
                    onOpen = {this.onToggle.bind(this)}   /*打开菜单*/
                    onClose = {this.onToggle.bind(this)}  /*关闭菜单*/
                    onClick={this.handleClick.bind(this)} /*触发菜单*/
                    >
                    <SubMenu key="sub1" title={<span><Icon type="user" /><span>用户服务</span></span>}>
                        <Menu.Item key="1">设置权限</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" title={<span><Icon type="setting" /><span>配置服务</span></span>}>
                        <Menu.Item key="2">app版本查询</Menu.Item>
                        <SubMenu key="sub3" title="app配置版本查询">
                            <Menu.Item key="3">导航配置查询</Menu.Item>
                            <Menu.Item key="4">广告配置查询</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="5">app changeLog</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub4" title={<span><Icon type="mail" /><span>短信服务</span></span>}>
                    </SubMenu>
                </Menu>
            </div>
        );
    }
}

第二步，通过页面加载组件Parent.js，固定菜单与菜单内容的位置

import React,{Component} from 'react';
import {render} from 'react-dom';
import Icon from 'antd/lib/icon';

import jiChu from '../../../build/images/jichu.png';

import HeaderRight from '../login/HeaderRight.js';
import SearchUser from '../login/SearchUser.js';
import Sidebar from '../sidebar/Sidebar.js';

import style from '../../../build/css/login.css';

export default class Parent extends Component{
    constructor(props){
        super(props);
    }

    render(){

        const headerUserPanel = (<HeaderRight {...this.props} />);
        const search = (<SearchUser {...this.props} />);
        const sidebars = (<Sidebar {...this.props} />);   /*菜单组件*/

        return(
            <div className="main-view">
                <div className="main-sidebar">
                    <div className="sidebar-wrapper">
                        <div className="sidebar">
                            <div className="logo">
                                <img src={jiChu} className="logoPic" />
                            </div>
                            <div className="sidebar-nav">
                                {sidebars}
                            </div>
                            <div className="sidebar-footer">
                                <span><Icon type="double-left" /><span>收缩菜单</span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="main-wrapper">
                    <div className="main-nav-bar">
                        <div className="navbar">
                            {headerUserPanel}
                        </div>
                        <div className="main-body">
                            <div className="main-content">
                                {this.props.children}             /*菜单组件对应内容*/
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

最后一步，在路由中通过path将页面与路径关联，这样我们在菜单组件中的跳转就是通过这一步控制

import React from 'react';
import {render} from 'react-dom';
import { Router , Redirect, Route , IndexRoute , browserHistory } from 'react-router';
import { Provider } from 'react-redux'

const store = configureStore();
render((
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path={user_service_path} component={Parent}>

            <Route path={user_sidebar_bath} component={Sidebar}></Route>

            <Route path={application_search_path} component={AdvertisementTablePannelContainer}></Route>

    </Provider>
), document.getElementById('root'));

完毕！