Question

我有一个反应组件：

React.createComponent({

  render: function () {

    return (<div className="some-component"></div>);

  }
});

渲染几秒后，我希望它在组件中添加一个类。该类用于通过动画显示组件。我不认为它是一个真正的状态变化，因为它对应用程序没有任何影响，只是给组件一个动画介绍，所以我厌恶通过更改存储/从组件外部启动它/状态。

我如何用简单的方式做到这一点？类似的东西：

{setTimeout(function () {

  this.addClass('show'); //pseudo code

}, 1000)}

显然我可以使用jQuery，但感觉反React，并且容易产生副作用。

Answer 1

我不认为这是对状态的真正改变，因为除了给组件提供动画介绍之外，它对应用程序没有任何影响

组件中的状态更改似乎是此方案的自然和正确的解决方案。组件状态的更改会触发重新渲染，这正是您需要的。考虑一下我们讨论的是组件的状态，而不是你的应用程序。

在React中，你不直接处理DOM（例如通过使用jQuery），而你的组件状态应该“驱动”渲染的内容，所以让React“响应”状态/道具的变化并更新DOM为了反映当前的状态：

React.createComponent({

  componentDidMount () {
    this.timeoutId = setTimeout(function () {
        this.setState({show: true});
    }.bind(this), 1000);
  } 

  componentWillUnmount () {
    if (this.timeoutId) {
        clearTimeout(this.timeoutId);
    }
  }

  render: function () {

    return (<div className={this.state.show ? 'show' : null}></div>);

  }
});

在React中使用setTimeout时，您需要小心并确保在卸载组件时取消超时，否则如果超时仍然未决并且组件被删除，则无论如何都会运行超时回调函数。

如果您需要执行初始装载动画或更复杂的动画，请考虑使用ReactCssTransitionGroup，它会为您提供开箱即用的超时和其他内容：https://facebook.github.io/react/docs/animation.html

在一定时间后将类添加到React Component

1 个答案: