react,umi,antd-pro的layout封装过程

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

import React from 'react';
import { Layout, Form, Icon } from 'antd';
import isEqual from 'lodash/isEqual';
//深度比较对象
import memoizeOne from 'memoize-one'; //降低渲染的函数复杂度，提高性能
import { history, connect } from 'umi';
import { ContainerQuery } from 'react-container-query'; // 媒体查询 响应式组件
规定屏幕尺寸
import classNames from 'classnames';
import Media from 'react-media';//自适应，媒体查询
import Authorized from '@/utils/Authorized';
import { matchParamsPath, getRouterAuthority } from '@/utils/utils';//获取路径信息和路径权限
import { query } from '@/config/global';
import { Scrollbars } from '@/components';
import Context from '../MenuContext';
import styles from './index.less';
import LyIcon from '@/components/LyIcon';
class StudyNewTab extends React.PureComponent {
constructor(props) {
super(props);
this.matchParamsPath = memoizeOne(matchParamsPath, isEqual);
}
// 从models中获取到的值，通过context传递props
getContext() {
const { location, windowH, routersRecord } = this.props;
return {
location,
routersRecord,
windowH,
};
}
//前往已上传，资源上传，收藏夹页面
toOtherPage = (params) => {
params == 'resourceUpload' ? history.push({
pathname: `/new/${params}`,
query: {
backIndex: 1
}
}) : history.replace({
pathname: `/studyNewTab/${params}`
})
}
render() {
const {
children,
location: { pathname },
routersRecord,
route: { routes },
windowH,
} = this.props;
const routerConfig = getRouterAuthority(pathname, routes); //路由的角色权限
const layout = (
<Layout className="ly-layout">
<div className={`${styles.headerTab}`}>
<span className={styles.headerTitle} onClick={() => this.toOtherPage('home')}>学校资源库</span>
<div className={styles.headerRight}>
<span className={styles.control} onClick={() => this.toOtherPage('collection')}>
<LyIcon type={'icon-icon_shoucangjiahui'} iconfont />
收藏夹
</span>
{React.$db.getLocal('currentUser').userType=='TEACHER'&&<React.Fragment>
<span className={styles.control} onClick={() => this.toOtherPage('upload')}>
<LyIcon type={'icon-icon_yishangchuanhui'} iconfont />
已上传
</span>
<span className={styles.upload} onClick={() => this.toOtherPage('resourceUpload')}>资源上传</span>
</React.Fragment>}
</div>
</div>
{/* 子路由的布局展示 ，子路由配置展示*/}
<Layout>
<Scrollbars style={{ height: windowH - 68 }}>
<Authorized authority={routerConfig}>{children}</Authorized>
</Scrollbars>
</Layout>
</Layout>
);
return (
<React.Fragment>
{/* 屏幕自适应的设置 ，进行页面的渲染*/}
<ContainerQuery query={query}>
{params => (
<Context.Provider value={this.getContext()}>
<div className={classNames(params)}>{layout}</div>
</Context.Provider>
)}
</ContainerQuery>
</React.Fragment>
);
}
}
export default connect(({ global, setting, menu }) => ({
collapsed: global.collapsed,
windowH: global.windowH,
...setting,
...menu,
}))(props => (
<Media query="(max-width: 599px)">
{isMobile => <StudyNewTab {...props} isMobile={isMobile} />}
</Media>
))
;
// connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能，譬如dispatch
/* connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数，该函数需要返回一个对象，用于建立 State 到 Props 的映射关系。】
简而言之，connect接收一个函数，返回一个函数。 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 },
{
path: '/studyNewTab',
component: '../layouts/StudyNewTab',
routes: [
{
path: '/studyNewTab/collection',
name: '收藏夹',
component: './resourcePlatform/component/collection/index'
},
{
path: '/studyNewTab/upload',
name: '已上传',
component: './resourcePlatform/component/upload/index'
}
]
},