如何更改 Ant Design Pro 的默认 Loading Spinner

Question

我进行了搜索，但似乎无法弄清楚如何更改使用 Ant Design Pro V4 生成的默认加载微调器。我使用了生成器和运行 npm create umi myApp。我想用自定义微调器替换默认的四圈微调器。

默认加载程序位于此处：

#/myApp/config/config.ts

...
  dynamicImport: {
    loading: '@/components/PageLoading/index',
  },
...

当我根据Ant Design的customer spinner文档修改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

Return 值应该是一个组件。函数或 class 组件。

这可行：

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;

如何更改 Ant Design Pro 的默认 Loading Spinner

How to change default Loading Spinner for Ant Design Pro

reactjs

antd

ant-design-pro