样式化组件延迟设置属性

使用父级的状态来决定何时应呈现加载程序。

下面的代码应该都在呈现加载程序的父组件中。

在构造函数中初始化状态

this.state = {showLoader: false}

定义一个函数(在类中)来显示加载程序组件。通过将它定义为一个箭头函数,您可以将它自动绑定到类,这样我们就不会在将它作为回调传递时遇到问题。

showLoader = () => {
    this.setState({ showLoader: true })
}

在componentDidMount中,为希望加载程序呈现的时间设置超时,并将showLoader函数作为回调传递。在本例中,在1000毫秒后调用itll。

componentDidMount() {
   setTimeout(this.showLoader, 1000)
}

在render函数中,只有当状态设置为true时,才能使用render Loader

render() {
   const { showLoader } = this.state

   return (
      <div>
         ... other stuff
         {showLoader && <Loader \>}
      <\div>
   )
}

希望能有帮助!!

编辑:

如果您想使用一些转换,而不是有条件地呈现加载程序组件,请将showLoader状态作为prop传递给它,并使用它有条件地添加一个类。

父呈现函数:与之前呈现加载程序的行的摘录相同

<Loader show={showLoader} \>

在子呈现中,假设这个div包装了标记的其余部分

<div className={this.props.show ? ‘show’ : ‘’} \>

然后,如果div以opacity 0开始,并有一个transition:opacity 1s属性(根据您的使用情况更改时间),那么-show类只需要添加opacity 1

如果需要纯css路由,可以向加载程序组件添加关键帧和动画。

animation: fade-in 0.5s ease-in-out forwards;

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }    

其中第二个参数 animation 是延迟。您可以将其与jsx中的一些条件呈现相结合,从而在不使用settimeout的情况下延迟动画