如何更改 Ant Design Pro 的默认加载微调器

Question

我搜索了一下，但似乎无法弄清楚如何更改使用 Ant Design Pro V4 生成的默认加载微调器。我使用发电机并运行了npm create umi myApp.有一个默认的四圆微调器，我想用自定义的微调器替换它。

默认加载程序位于此处：

#/myApp/config/config.ts
...
dynamicImport: {
loading: '@/components/PageLoading/index',
},
...

当我根据 Ant Design 的客户微调器文档修改PageLoading/index.tsx页面时。我一直收到此错误。

Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object.
Check the render method of `LoadableComponent`.

原始PageLoading/index.tsx

import { PageLoading } from '@ant-design/pro-layout';
// loading components from code split
// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
export default PageLoading;

修改后的PageLoading/index.tsx

import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const CustomSpinner = <Spin indicator={antIcon} />
export default CustomSpinner;

我需要做什么才能使其成为LoadableComponent？谢谢！

Answer 1

返回值应该是一个组件。函数或类组件。

这将起作用：

import react from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
// Return value should be component
const CustomSpinner = () => <Spin indicator={antIcon} />
export default CustomSpinner;

Answer 2

一种执行此操作的新方法。您可以全局定义默认旋转元素。

//top of app.tsx
import { Spin } from 'antd';
Spin.setDefaultIndicator(<div>Loading</div>);

蚂蚁设计专业参考 https://ant.design/components/spin/#Static-Method