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

Question

我使用的是 ReactJS 框架，我尝试过这个组件在 200 毫秒后将其样式从 opacity 0 更改为 opacity 1。是否可以执行这样的 setTimeout？

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

Answer 1

这是一个使用隐藏/可见类之间切换的工作示例。我添加了过渡以便更容易看到效果(200 毫秒是非常短的时间)，但您可以在代码中将其删除。

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>