如何使用react-bootstrap制作加载动画

Question

我想在等待API调用的同时使用react-bootstrap制作加载动画。我知道如何设置状态来启动和停止它，我只是不知道如何使用react-bootstrap来实现。我想我必须使用Overlay（用于“淡入淡出”效果）和Spinner，但不确定如何使用。

谢谢！

Answer 1

您可以通过多种方式实现它。一种非常简单的方法是使用条件渲染：加载时您正在加载的状态...

{loading?<YourComponent/>:<Spinner animation="border" role="status">
  <span className="sr-only">Loading...</span>
</Spinner>}