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

基本的配置大概已经结束了，现在我们可以使用antd的组件来进行业务开发了。

实现效果图：

改动的地方如下：

新建一个全局菜单文件 layout/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
1import React from 'react';

2import { Layout, Menu, Icon, Breadcrumb } from 'antd';

3import { withRouter } from 'react-router-dom';

4

5const {

6    Header, Content, Footer, Sider,

7  } = Layout;

8const SubMenu = Menu.SubMenu;

9

10class LayoutBasic extends React.PureComponent {

11    state = {

12        collapsed: true,

13        menu: [

14            {

15                match: '/todoList',

16                icon: 'book',

17                name: '清单列表'

18            },

19            {

20                match: '/myList',

21                icon: 'calendar',

22                name: '我的列表'

23            },

24            {

25                match: '/user',

26                icon: 'team',

27                name: '关于我'

28            }

29        ]

30    }

31    render() {

32        return (

33            <Layout

34                style={{ minHeight: '100vh' }}

35            >

36                <Sider

37                    theme="dark"

38                    collapsed={this.state.collapsed}

39                    collapsedWidth="0"

40                    breakpoint="sm"

41                    onCollapse={() => { this.setState({ collapsed: !this.state.collapsed }); }}

42                >

43                    <Menu

44                        theme="dark"

45                        mode="inline"

46                        selectedKeys={this.state.menu

47                            .filter(item => this.props.location.pathname.indexOf(item.match)=== 0)

48                            .map(item => item.match)}

49                        onClick={(item) => {

50                            if (item.key !== this.props.location.pathname + this.props.location.search) {

51                                this.props.history.push(item.key);

52                            }

53                        }}

54                    >

55                        {

56                            this.state.menu.map(item => (

57                                <Menu.Item key={item.match} >

58                                    <Icon type={item.icon} />

59                                    <span>{item.name}</span>

60                                </Menu.Item>

61                            ))

62                        }

63                    </Menu>

64                </Sider>

65                <Layout>

66                    <Header style={{ background: '#fff', padding: 0 }} />

67                    <Content style={{ margin: '0 16px' }}>

68                        {this.props.children}

69                    </Content>

70                </Layout>

71            </Layout>

72        )

73    }

74}

75export default withRouter(LayoutBasic)

76

77

详细参考：Layout

APP.js中修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1import LayoutBasic from './layout/';

2

3const App = ((history) => {

4    return (    

5        <Router history={history}>

6            <LayoutBasic>

7                <Switch>

8                    <Route path="/" exact component={TodoList}></Route>

9                    <Route path="/todoList" exact component={TodoList}></Route>

10                    <Route path="/todoDetail" exact component={TodoDetail}></Route>

11                </Switch>

12            </LayoutBasic>

13        </Router>

14    )

15});

16

17

这里主要就是使用 包裹
，实现全局的左侧菜单~

想要实现更多样式的布局可以参考 **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地址

关注我获取更多前端资源和经验分享

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