Javascript 在组件样式中更改200ms后的不透明度

我使用ReactJS框架，并尝试在200毫秒后将该组件的样式从

opacity 0

更改为

opacity 1

。是否可以执行此设置超时

<GreetingHeadline styles={?} id={this.props.user.id} />

---

您可以将变量置于GreetingHeading父组件的状态：

constructor() {
  this.state = {
    transparent: true;
  }
}

然后，您可以在componentDidMount生命周期的方法中使用setTimeout：

componentDidMount() {
  this.setTimeout(() => {
    this.setState({ transparent: false });
  }, 200);
}

最后，您可以在GreetingHeadline组件的道具中使用状态变量：

<GreetingHeadline
  styles={{ opacity: this.state.transparent ? '0.7' : '1' }}
  id={this.props.user.id}
/>

---

设置类是更改不透明度的最简单方法。下面的示例还使用动画“平滑”过渡

---

下面是一个工作示例，它使用隐藏/可见类之间的切换。我添加了转换，以便更容易看到效果（200毫秒是很短的时间），但您可以在代码中删除它

类测试扩展了React.Component{
构造函数（）{
超级（）；
this.state={classes:'hidden'}；
}
componentDidMount（）{
setTimeout（（）=>this.setState（{classes:'visible'}），200）；
}
render（）{
const{classes}=this.state；
返回要呈现的文本；
}
}
ReactDOM.render（，document.getElementById（'container'））
.hidden{opacity:0；}
.visible{opacity:1；transition:opacity 1s linear；}

@Andy，我想使用不透明度。@Andy，但我没有转换。我想知道，这个组件在200毫秒后不透明度为1。使用代码片段时要小心，你可能想在发布之前测试它们