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

孩子需要一把钥匙

改变：

q=42

到：

{this.props.children}

您的测试是否在List中呈现硬编码内容，请尝试：

render：function（）{ 返回Hello世界 }

此外，ReactTransitionGroup采取行动，你可能正在寻找＆＃34;出现＆＃34;过渡如此处记录的那样：https://facebook.github.io/react/docs/animation.html#getting-started

ReactTransitionGroup低级API

2 个答案: