react 全局loading
时间: 2023-06-22 08:15:44 浏览: 63
可以使用第三方库react-loading来实现全局loading效果。
首先,安装react-loading库:
```
npm install react-loading
```
然后,在需要显示loading的组件中引入react-loading:
```
import ReactLoading from 'react-loading';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
};
}
render() {
return (
<div>
{this.state.isLoading &&
<div className="loading">
<ReactLoading type={'spin'} color={'#000'} height={'5%'} width={'5%'} />
</div>
}
//其他组件内容
</div>
)
}
}
```
在组件的state中添加isLoading属性,根据需要显示loading时,将isLoading设置为true即可。在需要显示loading的位置添加一个div,并设置样式,然后将ReactLoading组件放入其中,即可实现全局loading效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)