TransitionGroup不会从DOM中删除元素

Question

我遇到问题，其中TransitionGroup不会从DOM中删除所有元素。

我想切换2和4个元素。然而，TransitionGroup总是在和4个元素之间切换。我没有得到这种行为。

看一看jsfiddle。如果你删除TransitionGroup一切工作正常。

任何想法？

请注意，我故意用TransitionGroup，而不是CSSTransitionGroup

谢谢！

Answer 1

看起来这是React中的一个真正的bug。检出这些GitHub问题#3111和#2549。

希望可以通过版本号0.14修复。

Answer 2

所以，我在JS小提琴中注意到了几件事。

首先，您需要引用React.addons.CSSTransitionGroup，而不是React.addons.TransitionGroup。将您的div封装在别名的TransitionGroup中并没有提供任何功能，并且可能会导致React中的对帐过程出现混淆。

其次，您需要指定CSSTransitionGroup的transitionName，和提供专门命名的CSS以配合它。如果你看看我的例子，我复制了他们在React文档中提供的相同的CSS。如果你愿意，你可以指定transitionLeave或transitionEnter为false，如果你只想在物品进入或离开时动画。

最后，剩下的代码很好，但我会建议您根据一些逻辑呈现您的div，并将它们作为静态集合呈现，但这也取决于您想要完成的工作。我一起砍了一个工作的例子。不是最漂亮的代码，但它应该适用于你以后的内容。

另外，钥匙是非常重要的。使用数组索引不是最稳定的事情，但它又取决于情况。钥匙只需要在同级元素之间是唯一的，所以在这种情况下，它可能是好的。只要知道，如果你在渲染中看到奇怪的行为，并且你有一组元素被渲染，首先要看的是你的关键。

JS Fiddle Example

React Docs on Animation

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var App = React.createClass({ 

getInitialState() { 
    return { 
     expanded: true, 
     divs: [1,2,3,4] 
    } 
}, 
render: function() {  

    var divs = []; 

    if(this.state.expanded) { 
      this.state.divs.map(function(div, index){ 
      divs.push(<div key={index}>{div}</div>); 
     });      
    } else { 
     divs.push(<div key={0}>{this.state.divs[0]}</div>); 
    } 

    return (
     <div> 
      <button type="button" onClick={this.toggleExpanded}> 
       {this.state.expanded ? 'collapse' : 'expand'} 
      </button> 
      <ReactCSSTransitionGroup transitionName="example"> 
       {divs} 
      </ReactCSSTransitionGroup> 
     </div> 
    ) 
}, 
toggleExpanded: function() { 
    this.setState({ 
     expanded: !this.state.expanded 
    }); 
} 
}); 

React.render(<App />, document.getElementById('container'));