react antd layout sider
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的更多相关文章
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 基于webpack+react+antd 项目构建
工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...
- React+Antd遇到的坑
第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑.必须要记录. react + antd,都是最新版本,使用npm和yarn各种add,build,start 1. 资源文件, ...
- React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。
最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")
版本:[ "JYadmin-react-antd": "^1.0.0"] 版权所有:微信公众号[微新悦] 原文链接:https://www.weixinyue. ...
随机推荐
- 001-docker概述、架构、window安装、基本测试
一.概述 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流 ...
- Linux基础整理 + 注释
1.Linux的常用命令: ls 显示当前文件夹目录 ll -->详细信息 ls -a 显示所有文件 ls -lhSr w 查看登录的帐号,还可以查看cpu负载情况,who am i ,who ...
- 华为大数据项目fusionInsight
项目简述:基于开源Hadoop2.0架构的集群网络,进行海量数据的分布式计算.由于Hadoop集群规模不断扩大,而搭建一个同等规模的测试集群需要一笔昂贵的开销.目前有100台左右物料,期望预测计算节点 ...
- C++11中的array
stl中的vector功能相比普通数据而言是要强大很多的,代价是需要动态的内存管理机制(分配,再分配,释放). 而有时候我们只需要普通的数组而已,这就带来了效率上的浪费. array就是用来代替普通的 ...
- Rest_framework-1
目录 一.认证 二.权限 三.限制访问频率 四.总结 一.认证(补充) 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from rest_fra ...
- tomcat web工程 jar包冲突解决方法
目前在部署工程时,遇到了一个问题,报错信息如下: See Servlet Spec 2.3, section 9.7.2. Offending class: javax/servlet/Servlet ...
- php内存管理机制、垃圾回收机制
一.内存管理机制 先看一段代码: <?php //内存管理机制 var_dump(memory_get_usage());//获取内存方法,加上true返回实际内存,不加则返回表现内存 $a = ...
- 分支语句(switch case)
/switch case 的应用 Console.WriteLine("1.汉堡包"); Console.WriteLine("2.薯条"); Console. ...
- C/C++中0xcccccccc...
* 0xABABABAB : Used by Microsoft's HeapAlloc() to mark "no man's land" guard bytes after a ...
- java鲁棒性(健壮性)
java能检测编译和运行时的错误 java自己操作内存减少了内存出错的可能 java实现了真数组,避免了覆盖数据的可能 Java不支持指针操作,大大减少了错误发生的可能性 ... 备注: Java能运 ...