ReactTransitionGroup挂钩中的回调是什么？

ReactTransitionGroup挂钩中的回调是什么？

首先，我也仍在学习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);

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