如何更改Ant Design的默认加载纺纱器

Question

我搜索了，但似乎找不出如何更改使用V4生成的默认加载旋转器。我用了发电机运行了npm create umi myApp。有一个默认的四圈旋转器，我想用一个定制的旋转器来替换。

默认加载程序位于以下位置：

#/myApp/config/config.ts

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

当我根据Ant的客户查询文档修改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