css - 一段时间后向 React 组件添加类

Question

我有一个 react 组件:

React.createComponent({

  render: function () {

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

  }
});

渲染后几秒钟，我希望它从组件内添加一个类。该类的目的是通过动画显示组件。我不认为它是真正的状态更改，因为除了为组件提供动画介绍之外，它对应用程序没有任何影响，因此我讨厌通过更改 store/从组件外部启动它状态。

简单来说我该如何做到这一点？像这样的东西:

{setTimeout(function () {

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

}, 1000)}

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

Answer 1

I don't regard it as a real change of state, as it has no affect on the application other than to give the component an animated introduction

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

在 React 中，你不直接处理 DOM(例如通过使用 jQuery)，相反你的组件状态应该“驱动”渲染的内容，所以你让 React 对状态/属性的变化做出“ react ”并更新 DOM让您反射(reflect)当前状态:

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