这是我尝试使用过于简单的演示来解决此问题的尝试。

js小提琴。

JavaScript：

var Container = React.createClass({
    onClicked: function() {
        console.log('Container.onClicked');
        if(this.state.isShowing){
            this.refs.myHelloWorld.hide();
        } else {
            this.setState({ isShowing: true });
        }
    },
    onAnimationComplete: function() {
        console.log('Container.onAnimationComplete');
        this.setState({ isShowing: false });
    },
    getInitialState: function() {
        return { isShowing: false };
    },
    render: function() {
        var helloWorld = this.state.isShowing ? <Hello name="World!" onComplete={this.onAnimationComplete} ref="myHelloWorld" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onClicked}/>
                {helloWorld}
            </div>
        );
    }
});

var MyButton = React.createClass({
    render: function() {
        return <button onClick={this.props.onButtonClicked}>Toggle</button>;
    }
});

var Hello = React.createClass({
    hide: function() {
        console.log('Hello.hide');
        var that = this;
        $(React.findDOMNode(this)).stop(true).fadeOut({
            duration: 1200,
            complete: function() {
                that.props.onComplete();
            }
        });
    },
    componentDidMount: function() {
        console.log('Hello.componentDidMount');
        $(React.findDOMNode(this)).stop(true).hide().fadeIn(1200);
    },
    componentWillUnmount: function() {
        console.log('Hello.componentWillUnmount');
    },
    render: function() {
        return <div>Hello { this.props.name }</div>;
    }
});
React.render(<Container />, document.body);

正如你已经想通了，这是不是很难任何动画子组件中通过使用主视图componentDidMount生命周期事件。

然而，当我们想从主视图中动画出我们的子组件时，做同样的事情很棘手，因为相应的componentWillUnmount生命周期事件在我们的视图实际卸载后触发，并且在此之前没有可用的事件可用. 即使有，我们也必须手动从内部或主视图中删除我们的子组件。我最初想用React.unmountComponentAtNode做同样的事情，但后来想出了另一种方法。

解决的办法是先从主视图向子组件发送一个回调，作为后面会用到的参数。然后我们调用子组件的另一个方法，该方法将动画出组件的 DOM 节点本身。最后，当动画完成时，我们将触发我们之前收到的相同回调。

希望这可以帮助。

PS 这种方法不受 jQueryanimate()和相关方法的严格约束，相反，这种方法可以用于任何其他基于 JS 的动画库（我正在看我最喜欢的GSAP ;)），只要它们在动画时触发回调已完成（并且GSAP提供了大量）。

更新#1：

哇哇哇哇！

所以碰巧的是，我更多地挖掘 ReactJS，尤其是它的动画部分，看看我发现了什么，他们已经公开了一个用于转换事件的低级 API。

所以我们之前试图用我们自己的回调来完成的事情，并且我们的props对象维护对等的引用，结果证明，它可以使用这个 API 本身来完成。

我现在不确定我是否真的非常喜欢它，因为我还没有在实际项目中实现这两种技术，但我很高兴我们现在有可用的选项。我们可以使用内部 API，或者我们可以按照之前的建议编写自己的解决方案。

看看这个修改过的jsFiddle做同样的事情，但这次使用内部回调，如componentWillEnter和componentWillLeave。