实践webpack+es6+react+redux+antd构建项目(五) antd Layout菜单

基本的配置大概已经结束了，现在我们可以使用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~

链接：

关注我获取更多前端资源和经验分享
在这里插入图片描述

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~

Deidei☀️

发布了102 篇原创文章 · 获赞 202 · 访问量 40万+

私信关注

实践webpack+es6+react+redux+antd构建项目(五) antd Layout菜单

猜你喜欢