Question

我有一个“哑巴” React “组件”，它是一个 Loader ，我想在一段时间后显示它。我当时想在经过一段时间后设置其opacity或display属性，但是我不确定该怎么做。

如果这不可能，那么添加或删除一个类也可以（延迟相同），但是同样，我不知道如何在无状态组件上做到这一点

谢谢

Answer 1

使用父级的状态来决定何时应显示Loader。

以下所有代码均应位于呈现Loader的父组件中。

在构造函数中初始化状态

this.state = {showLoader: false}

定义一个函数（在类中）以显示加载程序组件。通过将其定义为箭头函数，您可以将其自动绑定到类，因此我们可以毫无问题地将其作为回调传递。

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

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

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

在渲染功能中，只有将该状态设置为true时，才渲染Loader

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

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

希望有帮助！！

编辑：

如果您想使用某种过渡，而不是有条件地渲染Loader组件，则将showLoader状态作为道具传递给它，并使用它有条件地添加一个类。

父级渲染功能：与渲染Loader的那一行摘录之前相同

<Loader show={showLoader} \>

在子渲染中，假设此div封装了其余的标记

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

然后，如果div以不透明度0开始并具有过渡：opacity 1s属性（更改适合您用法的时间），那么“ show”类将只需要添加不透明度1

Answer 2

如果要使用纯CSS路径，可以将关键帧和动画添加到加载器组件。

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

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

其中animation中的第二个参数是延迟。您可以将其与jsx中的某些条件渲染结合使用，以在不使用settimeout的情况下延迟动画时间

样式化的组件延迟设置属性

2 个答案: