如何更改Ant Design Pro的默认加载动画？

Question

我搜索了但无法确定如何更改Ant Design Pro V4生成的默认加载动画。我使用了生成器并运行了npm create umi myApp。默认的四圈加载动画我想要用自定义的替换。

默认的加载动画位于这里：

#/myApp/config/config.ts

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

当我根据 Ant Design 的自定义 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？谢谢！

- Scott Yu

Answer 1

一种新的方法来实现这个功能。你可以全局定义默认的旋转元素。

//top of app.tsx

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

Ant Design Pro 参考文档 https://ant.design/components/spin/#Static-Method

- fyalavuz

Answer 2

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

以下代码是正确的：

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;

- Sajjad Shahi

---

赞 Sajad。scootcho，请记得在文件顶部添加 import React from 'react'，以便将 JSX 转译。;) - tiomno

@tiomno 是的，那很明显。我编辑了答案。谢谢！ - Sajjad Shahi