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

我是新手

我有一个“dumb”React“component”，它是一个加载程序，我想在延迟一段时间后显示它。我想在经过一段时间后设置它的

不透明度

或

显示

属性，但我不知道该怎么做

如果这是不可能的，那么可能添加或删除类也会起作用（具有相同的延迟），但同样，我不知道如何在无状态组件上这样做

---

谢谢

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

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

在构造函数中初始化状态

this.state = {showLoader: false}

定义一个函数（在类中）来显示加载器组件。通过将它定义为arrow函数，您可以自动将它绑定到类，这样我们就可以将它作为回调传递

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

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

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

在“渲染”函数中，仅当“渲染加载程序”的状态设置为true时，才使用“渲染加载程序”

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

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

render（）{
const{showLoader}=this.state
返回(
…其他东西
{showLoader&&}
)
}

希望有帮助

编辑：

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

父渲染函数：与之前相同，用于渲染加载程序的行的摘录

<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;
  }    

---

其中

动画中的第二个参数是延迟。您可以将其与jsx中的某些条件渲染相结合，以便在不使用settimeout的情况下对动画进行延迟
我已经使用样式化组件大约一个月了-不确定它们是否能够专门解决此问题。您的转储组件可能需要更智能，因此考虑其中的一些控件在延迟之后动态地应用一个类，使加载程序显示它实际上会将其封装在另一个组件中，这将延迟其渲染而不是使其“智能化”。我的朋友，相信我，我知道怎么做，不会问：）