React学习记一

自定义页面

背景：公司需要一个嵌入其他业务平台的页面，平台嵌入选择iframe标签，套件使用React + Antd Pro + Antd + Umi3开发。原本计划在另一个已有的平台上搭建，为了不影响原有平台的代码并且降低平台代码之间的耦合性，使用独立的平台承载。

实现过程

pro create projectName - umi3 - sample
cd projectName
npm install
npm run start

接下来清除layout和登录页projectName/src/app.tsx

import type { RunTimeLayoutConfig } from 'umi';
import { message } from 'antd';

// 页面自定义，所有加载本项目的都会经过这个页面，从上按下执行，比如我判断是否携带token
if (window.location.href.indexOf('token') < 0) {
  message.error('对不起，你无权访问该页面！');
}

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    pure: true, // 关闭框架的layout
    childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {children}
        </>
      );
    },
    ...initialState?.settings,
  };
};

自定义loading页面

适用于Umi3开发的平台，配置页projectName/config.ts

dynamicImport: {
  loading: '@ant-design/pro-layout/es/PageLoading', // 可以配置自己的加载页面，在所有资源加载时会展示该加载页
}