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'));