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

完毕!

使用antd UI 制作菜单的更多相关文章

  1. [UI]抽屉菜单DrawerLayout分析(一)

    本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...

  2. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  3. [UI]抽屉菜单DrawerLayout分析(三)

    在[UI]抽屉菜单DrawerLayout分析(一)和[UI]抽屉菜单DrawerLayout分析(二)中分别介绍了DrawerLayout得基本框架结构和ViewDragerHelper的作用以及手 ...

  4. Jquery.Treeview+Jquery UI制作Web文件预览

    效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...

  5. React 版 V2EX 社区( react & react-router & axios & antd ui)

    目录 项目简介 在线演示 截图演示 踩坑 项目简介(1/4) Github: https://github.com/bergwhite/v2ex-react 项目使用React.Reac-router ...

  6. Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作

    55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...

  7. WPF利用radiobutton制作菜单按钮

    原文:WPF利用radiobutton制作菜单按钮 版权声明:欢迎转载.转载请注明出处,谢谢 https://blog.csdn.net/wzcool273509239/article/details ...

  8. 学习CSS制作菜单列表,举一反三

    1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  9. 使用antd UI组件有感

    公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...

随机推荐

  1. 谷歌电子市场1--BaseFragment

    1.BaseFragment 共性 加载中加载失败数据为空加载成功 2.loadData调用 3.网络封装 请求网络获取数据缓存机制(写缓存和读缓存)解析数据请求网络前,先判断是否有缓存, 有的话就加 ...

  2. iOS9请求https问题-记录

    iOS9 开始苹果将HTTP全改为HTTPS了,所以出现网络请求失败问题,解决办法: 1.改回HTTP: 在info.plist文件中添加一个Key:NSAppTransportSecurity(字典 ...

  3. 详解tintColor属性

    tintColor属性是iOS7之后新加的一个属性,这个属性定义了一个非默认的着色颜色值,其值的设置会影响到以视图为根视图的整个视图层次结构.它主要是改变控件的颜色,以获取一些有意思的视觉效果. ti ...

  4. 在eclipse中把Tomcat 8删掉不能重建问题,启动Tomcat重置本地配置问题

    转载:http://blog.csdn.net/caiwenfeng_for_23/article/details/45480039 PS: 今天手贱,把Eclipse里的tomcat删掉了,然后发现 ...

  5. AppDelegate动态加载StoryBoard

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  6. iOS -[PFPASIDataCompressor compressBytes:length:error:shouldFinish:] in PFPGZIPInvocationCompressor.o

    添加动态库报错 "_deflate", referenced from: -[PFPASIDataCompressor compressBytes:length:error:sho ...

  7. MPMoviePlayerController属性,方法,通知整理

    属性 说明 @property (nonatomic, copy) NSURL *contentURL 播放媒体URL,这个URL可以是本地路径,也可以是网络路径 @property (nonatom ...

  8. Shell 编程

    Shell 是一门脚本语言(又称解释型语言),Shell 其实就是一个纯文本文件,通常以[#!/bin/bash]开始.脚本自上而下,从左至右分析并执行,其中[#]后面的为注释.脚本有以下几种运行方式 ...

  9. Symantec Backup Exec 2010 Agent For Linux安装

    以前写过一篇文章介绍过Symantec Backup Exec 2012 Agent For Linux安装安装,今天介绍一下Symantec Backup Exec 2010 Agent For L ...

  10. JVM之ParNew收集器

    新生代收集器,CMS默认搭配,Serial的多线程版本. -XX:UseParNewGC:指定使用ParNew收集器. -XX:ParalletGCThreads:指定限制垃圾收收集的线程数量. 默认 ...