Question

我使用ReactJS框架，然后尝试该组件在200毫秒后从opacity 0更改为opacity 1。可以执行这样的setTimeout吗？

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

Answer 1

这是一个使用隐藏/可见类之间切换的有效示例。我添加了过渡，以便可以更轻松地看到效果（200ms是非常短的时间），但是您可以在代码中将其删除。

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

您可以将一个变量设置为GreetingHeadline的父组件的状态：

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

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

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

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

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

Answer 3

设置类是更改不透明度的最简单方法。这是一个示例，该示例还使用动画来“平滑”过渡。

https://codesandbox.io/s/j371123nq9

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

3 个答案: