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

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接收一个函数，返回一个函数。 */

 },
{
path: '/studyNewTab',
component: '../layouts/StudyNewTab',
routes: [
{
path: '/studyNewTab/collection',
name: '收藏夹',
component: './resourcePlatform/component/collection/index'
},
{
path: '/studyNewTab/upload',
name: '已上传',
component: './resourcePlatform/component/upload/index'
}
]
},

过程：

1.先进行layout页面的书写。

2.配置一级路由信息。

3.对layout进行子路由的设置，通过{children}渲染子路由页面。

4.利用context进行传值，可以解决通过多层组件传值的复杂性

5.利用connect（）绑定models中的state成为组件中的props 

6.通过containerQuery来屏幕自适应的设置，页面的渲染。

7.特别注意子路由的配置路径，要在一级路由的基础上。

（主要涉及的三个文件是，layout，router，models）

最后

以上就是糟糕柠檬为你收集整理的react,umi,antd-pro的layout封装过程的全部内容，希望文章能够帮你解决react,umi,antd-pro的layout封装过程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。