基本的配置大概已经结束了,现在我们可以使用antd的组件来进行业务开发了。
实现效果图:
改动的地方如下:
新建一个全局菜单文件 layout/index.js
import React from 'react';
import { Layout, Menu, Icon, Breadcrumb } from 'antd';
import { withRouter } from 'react-router-dom';
const {
Header, Content, Footer, Sider,
} = Layout;
const SubMenu = Menu.SubMenu;
class LayoutBasic extends React.PureComponent {
state = {
collapsed: true,
menu: [
{
match: '/todoList',
icon: 'book',
name: '清单列表'
},
{
match: '/myList',
icon: 'calendar',
name: '我的列表'
},
{
match: '/user',
icon: 'team',
name: '关于我'
}
]
}
render() {
return (
<Layout
style={{ minHeight: '100vh' }}
>
<Sider
theme="dark"
collapsed={this.state.collapsed}
collapsedWidth="0"
breakpoint="sm"
onCollapse={() => { this.setState({ collapsed: !this.state.collapsed }); }}
>
<Menu
theme="dark"
mode="inline"
selectedKeys={this.state.menu
.filter(item => this.props.location.pathname.indexOf(item.match)=== 0)
.map(item => item.match)}
onClick={(item) => {
if (item.key !== this.props.location.pathname + this.props.location.search) {
this.props.history.push(item.key);
}
}}
>
{
this.state.menu.map(item => (
<Menu.Item key={item.match} >
<Icon type={item.icon} />
<span>{item.name}</span>
</Menu.Item>
))
}
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '0 16px' }}>
{this.props.children}
</Content>
</Layout>
</Layout>
)
}
}
export default withRouter(LayoutBasic)
详细参考:Layout
APP.js中修改如下
import LayoutBasic from './layout/';
const App = ((history) => {
return (
<Router history={history}>
<LayoutBasic>
<Switch>
<Route path="/" exact component={TodoList}></Route>
<Route path="/todoList" exact component={TodoList}></Route>
<Route path="/todoDetail" exact component={TodoDetail}></Route>
</Switch>
</LayoutBasic>
</Router>
)
});
这里主要就是使用 包裹
想要实现更多样式的布局可以参考 **Antd Layout**官方文档
over~
链接:
- 实践webpack+es6+react+redux+antd构建项目(一) webpack配置
- 实践webpack+es6+react+redux+antd构建项目(二) react,redux,antd引入
- 实践webpack+es6+react+redux+antd构建项目(三) 配置proxy代理
- 实践webpack+es6+react+redux+antd构建项目(四) 区分dev和prod环境
- 项目github地址
关注我获取更多前端资源和经验分享
感谢大佬们阅读,希望大家头发浓密,睡眠良好,情绪稳定,早日实现财富自由~