使用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'));

完毕！