如何使用React-Bootstrap制作加载动画

Question

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

谢谢！

- Alexandre Serra

---

当你说“不知道如何”时，你具体是什么意思？如果你想要一个例子，react-bootstrap中已经有一个带有代码示例的旋转器，你可以直接使用它：https://react-bootstrap.github.io/components/spinners/ - Jayce444

@Jayce444 谢谢你的快速回复。我想在主容器上方放置一个旋转框，覆盖内容并具有一些“淡入淡出”的效果。 - Alexandre Serra

Answer 1

您可以通过多种方式实现它。其中一种非常简单的方法是使用条件渲染： 其中loading是您在获取数据时的状态...

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

- Javier Alejandro

---

谢谢。您有什么想法可以制作类似于 react-loading-overlay (https://www.npmjs.com/package/react-loading-overlay) 上的动画吗？ - Alexandre Serra

我使用MaterialUI的淡入组件来创建一个小动画... {!loading ? ( team.map(member => ( <Fade in={!loading} timeout={2000}> <Grid item md={3}> <Member teamMember={member} /> </Grid> </Fade> )) ) : ( <Spinner /> )} - Javier Alejandro

你可能真的想要反转条件，按照我读代码的方式，它会在数据不再加载时显示加载面板，而实际上应该是相反的。 - Ivaylo Slavov

Answer 2

https://react-bootstrap.netlify.app/components/spinners/#spinners。 在使用 API 请求后，您可以使用此组件直到组件加载完成。像这样： // 首先导入 react-bootstrap Spinner 组件

import {Spinner} from 'react-bootstrap'; 然后编写如下代码 --->

state = {
  exampleArray : [],
  loading : false
}

componentDidMount(){
   this.setState({
     ...this.state,
     loading: true
   })
   this.fetchItems(url);
};

fetchItems = (url) => {
   fetch(url)
   .then(response => response.json())
   .then((data) => {
    this.setState({
    loading:false,
    exampleArray : [...this.state.exampleArray, data]
   })
   })
}

render(){
return(
    {loading ? <Spinner /> : 
     exampleArray.map((arr)=> {
      return (
        <YourComponent 
          dataName : {arr.dataName}
          ............ you can pass what you want as a props

       />
      )
    })
    }



)

}

你可以搜索动画：animation.css库。非常简单易用。

- CanUver