TransitionGroup 不会从 DOM 中删除元素

Question

我有一个问题 TransitionGroup 没有从 DOM 中删除所有元素。

我想在 2 和 4 个元素之间切换。但是，对于 TransitionGroup，它总是在 3 和 4 个元素之间切换。我不明白这种行为。

看看jsfiddle。如果您删除 TransitionGroup 一切正常。

有什么想法吗？

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

谢谢！

Answer 1

看起来这是 React 中的一个真正的错误。检查这些 GitHub 个问题 #3111 and #2549。

它有望在版本 0.14 中得到修复。

Answer 2

所以，我在您的 JS 中注意到了一些事情 Fiddle。

首先，您需要参考 React.addons.CSSTransitionGroup，而不是 React.addons.TransitionGroup。将您的 div 包装在您拥有的别名 TransitionGroup 中不会提供任何功能，并且可能会在 React 中的协调过程中造成一些混乱。

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

最后，您的其余代码没问题，但我建议您根据某些逻辑呈现您的 div，而不是将它们作为静态集合，但这也取决于您要完成的任务。我一起破解了一个工作示例。不是最漂亮的代码，但它应该可以满足您的需求。

此外，KEYS 非常重要。使用数组索引并不是最稳定的做法，但这又取决于具体情况。键只需要在兄弟元素中是唯一的，所以在这种情况下，它可能没问题。只要知道，如果您在渲染中看到奇怪的行为，并且您有一个正在渲染的元素数组，那么首先要看的是您的键。

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

TransitionGroup 不会从 DOM 中删除元素

TransitionGroup does not remove element from DOM

reactjs

react-jsx