TransitionGroup не удаляет элемент из DOM

Question

У меня проблема, когда TransitionGroup не удаляет все элементы из DOM.

Я бы хотел переключить между 2 и 4 элементами. Однако с TransitionGroup он всегда переключается между и 4 элементами. Я не получаю такого поведения.

Посмотрите на jsfiddle. Если вы удалите TransitionGroup, все будет хорошо.

Любые идеи?

Пожалуйста, обратите внимание, что я намеренно используя TransitionGroup и не CSSTransitionGroup

Спасибо!

Answer 1

Похоже, что это настоящая ошибка в реактиве. Оформить заказ на эти вопросы GitHub #3111 и #2549.

Скорее всего, он будет исправлен версией 0.14.

Answer 2

Итак, есть несколько вещей, которые я заметил в вашем JS Fiddle.

Во-первых, вам нужно указать ссылку React.addons.CSSTransitionGroup, а не React.addons.TransitionGroup. Обертка ваших divs в aliased TransitionGroup у вас отсутствует, и, вероятно, вызывает некоторую путаницу в процессе согласования в React.

Во-вторых, вам нужно указать имя перехода для CSSTransitionGroup, и предоставить специально названный CSS, чтобы согласиться с ним. Если вы посмотрите на мой пример, я скопировал тот же CSS, который они предоставляют в документации React. Если вы хотите, вы можете указать 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'));