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={{ 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'));
完毕!