ReactTransitionGroup挂钩中的回调是什么？

Question

React.js为动画提供了一个低级API，称为ReactTransitionGroup。在文档中指出，对钩componentWillAppear，componentWillEnter和componentWillLeave，一个回调函数作为参数传递。

我的问题是，此回调究竟是什么以及如何传递给这些钩子，文档没有对这些回调进行任何说明，只是将动画延迟到调用之前。

Answer 1

首先，我也仍在学习ReactJS，所以我的方法可能有错误，而没有错误。为此提前致歉。

打开“开发人员工具”的console窗口，分析我刚刚制作的
这个jsFiddle 示例。观察调用回调的顺序。

我TweenMax习惯对框进行一些动画处理，以使其在单击按钮时显示或消失。

该 低级API 公开为我们利用了不少有用的回调。共享的示例演示了这些回调的用法。

JavaScript：

var ReactTransitionGroup = React.addons.TransitionGroup;
var MyBox = React.createClass({
    show: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.fromTo(node, 2, { width: 100, height: 100, backgroundColor: '#0cc', scale: 0.2, opacity: 0, rotation: -180 }, { width: 100, height: 100, backgroundColor: '#0cc', scale: 1, opacity: 1, rotation: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    hide: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.to(node, 2, { width: 100, height: 100, backgroundColor: '#cc0', scale: 0.2, opacity: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    componentWillAppear: function(didAppearCallback){
        console.log('MyBox.componentWillAppear');
        this.show(didAppearCallback);
    },
    componentDidAppear: function(){
        console.log('MyBox.componentDidAppear');
    },
    componentWillEnter: function(didEnterCallback){
        console.log('MyBox.componentWillEnter');
        this.show(didEnterCallback);
    },
    componentDidEnter: function(){
        console.log('MyBox.componentDidEnter');
    },
    componentWillLeave: function(didLeaveCallback){
        console.log('MyBox.componentWillLeave');
        this.hide(didLeaveCallback);
    },
    componentDidLeave: function(){
        console.log('MyBox.componentDidLeave');
    },
    componentDidMount: function() {
        console.log('MyBox.componentDidMount');
    },
    componentWillUnmount: function() {
        console.log('MyBox.componentWillUnmount');
    },
    render: function(){
        return <div>&nbsp;</div>;
    }
});
var Container = React.createClass({
    getInitialState: function(){
        return { isShowing: false };
    },
    onButtonClicked: function(){
        this.setState({ isShowing: !this.state.isShowing });
    },
    render: function(){
        var myBox = this.state.isShowing ? <MyBox key="myBox" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onButtonClicked} />
                <ReactTransitionGroup transitionName="hellotransition">
                    {myBox}
                </ReactTransitionGroup>
            </div>
        );
    }
});
var MyButton = React.createClass({
    render: function(){
        return <button onClick={this.props.onButtonClicked}>Click Me</button>;
    }
});
//
React.render(<Container />, document.body);

让我知道是否有任何不清楚的地方，我很乐意分享我所知道的。