在200毫秒后以组件样式ReactJS更改不透明度

Question

I using ReactJS framework and I try that, this component to change its style after 200ms from opacity 0 to opacity 1 . Is it possible to do such a setTimeout?

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

Answer 1

Here's a working example that uses toggles between hidden/visible classes. I've added the transition so the effect can be more easily seen (200ms is a very short time) but you can remove it in your code.

 class Test extends React.Component { constructor() { super(); this.state = { classes: 'hidden' }; } componentDidMount() { setTimeout(() => this.setState({ classes: 'visible' }), 200); } render() { const { classes } = this.state; return <div className={classes}>Text to be rendered</div>; } } ReactDOM.render(<Test />, document.getElementById('container')); 

 .hidden { opacity: 0; } .visible { opacity: 1; transition: opacity 1s linear;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"></div> 

Answer 2

You can put a variable to the state of the GreetingHeadline's parent component:

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

Then you can use setTimeout in the componentDidMount lifetime's method:

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

Finally you can use variable from the state within your GreetingHeadline component's props:

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

Answer 3

Setting a class is the easiest way to change the opacity. Here's an example that also uses an animation to "smooth" the transition.

https://codesandbox.io/s/j371123nq9