antd封装一个全局loading组件
时间: 2023-08-02 09:10:51 浏览: 57
可以通过封装一个全局 Loading 组件来实现 Antd 中的 Loading 效果,具体实现如下:
1. 在项目中创建 `Loading.js` 文件,并编写 Loading 组件
```
import React from 'react';
import { Spin } from 'antd';
const Loading = () => {
return (
<div style={{
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
zIndex: 9999,
}}>
<Spin size="large" />
</div>
);
};
export default Loading;
```
其中,使用了 Antd 中的 Spin 组件来实现 Loading 效果。
2. 在需要使用 Loading 的地方,引入 Loading 组件并在需要显示 Loading 时进行渲染
```
import React, { useState } from 'react';
import Loading from './Loading';
const MyComponent = () => {
const [loading, setLoading] = useState(false);
const handleButtonClick = () => {
setLoading(true);
// 在这里进行异步操作
setTimeout(() => {
setLoading(false);
}, 2000);
};
return (
<div>
<button onClick={handleButtonClick}>点击加载</button>
{loading && <Loading />}
</div>
);
};
export default MyComponent;
```
在这个示例中,通过 useState 来维护 Loading 的显示状态,并在需要显示 Loading 时进行渲染。在实际使用时,可以将 Loading 组件封装成一个高阶组件,方便在各个组件中进行使用。