Question

React.js为名为ReactTransitionGroup的动画提供了一个低级API。在文档中声明，对于钩子componentWillAppear，componentWillEnter和componentWillLeave，回调作为参数传递。

我的问题是，这个回调到底是什么以及如何将它传递给那些钩子，文档并没有说出那些回调，除了动画被延迟直到它们被调用。

Answer 1

首先，我还在学习ReactJS所以我的方法有可能是错的，什么不是。为此事先道歉。

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

我正在使用TweenMax对框进行动画制作，以便在点击按钮时显示或消失。

Low-level 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);

如果有任何不清楚之处，请告诉我，我很乐意分享我所知道的内容。

Answer 2

如果没有回调，React将无法知道等待自定义动画的时间。来自文档中的一种方法的一些澄清：

<强> componentWillLeave(callback)

当孩子从ReactTransitionGroup移除后，会调用此方法。虽然该子项已被删除，但ReactTransitionGroup会将其保留在DOM中，直到调用callback为止。

想象一下，您希望在组件安装时淡出组件，并且希望在纯JavaScript中实现淡出代码。卸载组件后，React调用componentWillLeave。您启动淡出代码（可能使用jQuery动画或一些补间库），当淡出完成时，您调用回调以指示动画已完成，然后和只有这样React才能卸载组件。

ReactTransitionGroup钩子中的回调是什么？

2 个答案: