加载动画后如何制作React加载组件？

Question

我有一个加载视频（约5秒），应在加载应用程序之前播放。启动应用程序时如何延迟应用程序的加载时间？

Answer 1

有很多方法可以执行此操作...提供一些代码可以帮助确定最佳解决方案。这实际上取决于您如何构造应用程序以及应用程序的要求。在我头顶上，如果您不关心SEO，则可以在根组件或全局存储的状态上放置一个标志，然后根据该标志的状态来呈现它或您的应用程序。如果您关心SEO，那么最好的解决方案是将视频放到具有较高z-index的固定容器中，以便它隐藏您的应用，然后在主要应用组件的hook / lifecycle方法上使用javascript删除该容器。 / p>

Answer 2

一旦执行了render方法，就会调用componentDidMount函数。可以使用此方法访问DOM，从而可以定义DOM操作或数据获取操作。在您的方案中，您可以像这样在conmponentDidMount中添加setstate函数

componentDidMount(){
      this.setState({appLoaded: true})
       }

之后，您可以像这样加载视频

<div>{
(this.state.appLoaded === true)?
 //Code goes here
 :'Loading...'
}</div>

您可以使用动画组件代替“正在加载...”。