javascript - 样式化组件延迟设置属性

Question

我是 Styled Components 的新手

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

如果那不可能，那么也许添加或删除一个类也可以(具有相同的延迟)但同样，我不知道如何在无状态组件上执行此操作

谢谢

Answer 1

使用父级的状态来决定何时渲染 Loader。

以下代码都应该在渲染 Loader 的父组件中。

在构造函数中初始化状态

this.state = {showLoader: false}

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

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

在 componentDidMount 中设置加载器渲染的超时时间，并将 showLoader 函数作为回调传递。在此示例中，它将在 1000 毫秒后调用。

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

在 render 函数中，仅当状态设置为 true 时才渲染 Loader

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

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

希望对您有所帮助!!

编辑:

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

父渲染函数:与之前渲染 Loader 的代码摘录相同

<Loader show={showLoader} \>

在子渲染中，假设这个 div 包装了标记的其余部分

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

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