react 全局loading
时间: 2023-06-22 09:15:44 浏览: 61
可以使用第三方库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效果。