在一定时间后将类添加到React Component [英] Adding class to React Component after a certain amount of time

问题描述

我有一个反应成分:

React.createComponent({

  render: function () {

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

  }
});

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

Some seconds after it renders, I want it to add a class from within the component. The class is for the purposes of revealing the component with an animation. 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, so I'm loathed to initiate it from outside of the component via a change of store/state.

我将如何简单地做到这一点?像这样:

How would I do this in simple terms? Something like:

{setTimeout(function () {

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

}, 1000)}

很明显，我可以使用jQuery，但这会产生反作用，并且容易产生副作用.

Obviously I could use jQuery, but that feels anti-React, and prone to side-effects.

推荐答案

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

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

在这种情况下，组件状态的改变似乎是自然而适当的解决方案.组件状态的更改会触发重新渲染，这正是您在这里需要的.考虑到我们在这里谈论的是组件的状态，而不是您的应用程序的状态.

A change of state in the component seems the natural and proper solution for this scenario. A change in a component state triggers a re-render, which is exactly what you need here. Consider that we're talking about the state of your component, not of your application here.

在React中，您不直接处理DOM(例如，使用jQuery)，而是您的组件状态应驱动"呈现的内容，因此您可以让React对状态/属性的更改进行反应"并更新DOM让您反映当前状态:

In React, you don't deal with the DOM directly (e.g. by using jQuery), instead your component state should "drive" what's rendered, so you let React "react" to changes in state/props and update the DOM for you to reflect the current state:

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 时，您需要小心并确保取消卸载组件时的超时，否则，如果超时仍在等待中并且您的组件仍在运行，则超时回调函数仍将运行被删除.

When using setTimeout in React you need to be careful and make sure to cancel the timeout when the component gets unmounted, otherwise your timeout callback function will run anyway if the timeout is still pending and your component gets removed.

如果您需要执行初始安装动画或更复杂的动画，请考虑使用 ReactCssTransitionGroup ，它可以为您自动处理超时和其他情况:

If you need to perform an initial mount animation or more complicated animations, consider using ReactCssTransitionGroup, which handles timeouts and other things for you out of the box: https://facebook.github.io/react/docs/animation.html

这篇关于在一定时间后将类添加到React Component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！