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

完畢！