ReactTransitionGroup底层接口

Question

我对React和动画真的很陌生，我正在尝试用ReactTransitionGroup动画我的组件，我不太确定该怎么做。未调用任何ReactTransitionGroup生命周期方法(componentWillAppear或ComponentDidAppear)。

var React = require('react');
var ReactTransitionGroup = require('react-addons-transition-group');

var App = React.createClass({
render: function(){
    return (

        <div> 
            <h3>Type in the box below to watch it change color.</h3>
            <div>
            <ReactTransitionGroup component={List}>
            {this.props.children}
            </ReactTransitionGroup>
             </div>
        </div>
        );
}

});

var List = React.createClass({
componentWillAppear: function(callback){
    console.log('componentWillAppear');
    setTimeout(callback, 1);
},
componentDidAppear: function(){
    console.log('componentDidAppear');
},

componentWillLeave: function(callback){
    console.log('componentWillLeave');
},
componentDidLeave: function(){
    console.log('componentWillLeave');
},
render: function(){
    return <div>{this.props.children}</div>
}

});

module.exports = App;

为什么不调用这些ReactTransitionGroup钩子？？请帮帮忙。

Answer 1

您的问题是将生命周期方法附加到您的自定义组件，该组件是动画子组件的父。从文档中：

当以声明方式添加或删除子时(如上面的示例所示)，将在它们上调用特殊的生命周期挂钩。

因此，期望生命周期方法的是{this.props.children}，而不是List。

Answer 2

孩子需要一把钥匙

更改：

{this.props.children}

至：

{React.cloneElement(this.props.children, {
    key: Math.random()
})}

在列表中渲染硬编码内容的测试，尝试：

渲染: function(){ return Hello world }

此外，ReactTransitionGroup还具有一些特性，您可能正在寻找一个类似于此处所记录的“外观”转换：https://facebook.github.io/react/docs/animation.html#getting-started