import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import {Layout, Menu, Icon} from 'antd';
const {SubMenu} = Menu;
const {Sider} = Layout; class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
currentPath : this.props.history.location || '/user'
}
} toggleCollapsed() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<Sider
width={250}
collapsible
onCollapse={() => this.toggleCollapsed()}
collapsed={this.state.collapsed}
style={{background: '#fff'}}>
<Menu
mode="inline"
defaultSelectedKeys={['0']}
//defaultOpenKeys={['sub1']}
style={{height: '100%'}}> <Menu.Item key="0">
<Link to="/">
<Icon type="home" />首页
</Link>
</Menu.Item> <SubMenu key="sub1" title={<span><Icon type="laptop"/>主导航</span>}>
<Menu.Item key="1">
<Link to="/antForm">多组表单form处理</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to="/antTable">表格table</Link>
</Menu.Item>
<Menu.Item key="3">
<Link to="/login">首页</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="save"/>商品</span>}>
<Menu.Item key="6">
<Link to="/product">商品管理</Link>
</Menu.Item>
<Menu.Item key="10">
<Link to="/product/add">商品添加</Link>
</Menu.Item>
<Menu.Item key="7">
<Link to="/product.category">品类管理</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title={<span><Icon type="shopping-cart"/>订单</span>}>
<Menu.Item key="8">
<Link to="/order">订单管理</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="user"/>用户</span>}>
<Menu.Item key="9">
<Link to="/user">用户管理</Link>
</Menu.Item>
</SubMenu> </Menu>
</Sider>
);
};
}
export default withRouter(SideBar);

react antd layout sider的更多相关文章

  1. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  2. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  3. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  4. React+Antd遇到的坑

    第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...

  5. React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

    最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...

  6. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  7. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  8. 封装react antd的upload上传组件

    上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...

  9. JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")

    版本:[ "JYadmin-react-antd": "^1.0.0"] 版权所有:微信公众号[微新悦] 原文链接:https://www.weixinyue. ...

随机推荐

  1. MySQL之 视图,触发器,事物,存储过程,函数(Day48)

    阅读目录 一.视图 二.触发器 三.事物 四.存储过程 五.函数 六.流程控制 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...

  2. Jupyter Notebook修改目标文件

    默认的路径 如果没有修改配置文件,那么一般就在用户目录下面: 下面各处默认起始目标地址,以防有一天想改回来 I:\shujufenxi\python.exe I:\shujufenxi\cwp.py ...

  3. python2中range和xrange的区别

    range和xrange用法相同,不同的是xrange不是生成一个序列,而是作为一个生成器,即生成一个取出一个 相对来说,xrange比range性能优化很多,因为不需要一下子开辟一块很大的内存,特别 ...

  4. dobbo 简单框架

  5. Microservice 概念

    一天我司招财猫姐(HR 大人)问我,你给我解释一下 Microservice 是什么吧.故成此文.一切都是从一个创业公司开始的. 故事 最近的创业潮非常火爆,我禁不住诱惑也掺和了进去,创建了一家公司. ...

  6. Spring 之自动化装配 bean 尝试

    [Spring之自动化装配bean尝试] 1.添加dependencies如下所示(不是每一个都用得到 <dependencies> <dependency> <grou ...

  7. windows 安装python3.5启动报错:api-ms-win-crt-runtime-l1-1-0.dll丢失

    下载: api-ms-win-crt-runtime就是MFC的运行时环境的库,python在windows上编译也是用微软的visual studio C++编译的,底层也会用到微软提供的C++库和 ...

  8. VRChat简易教程2-创建一个最基本的世界(world)

    一.准备工作 1 先确保你安装了unity并导入了sdk 教程:https://www.cnblogs.com/cation/p/10311702.html 2 按之前的教程新建一个project并导 ...

  9. php数组元素去空,测试奇数偶数

    <?php//返回奇数 function test_odd($var) { return($var & 1); } $a1=array("a","b&quo ...

  10. MyEclipse 为xml添加本地的dtd文件

    在使用Eclipse或MyEclipse编辑XML文件的时候经常会碰到编辑器不提示的现象,这常常是因为其xml文件需要参考的DTD文件找不到,还有因为网络的问题不能及时提示而产生的.Eclipse/M ...