React TransitionGroup componentWillLeave ничего не делает

Question

Я хочу анимировать экран загрузки с помощью React TransitionGroup, до сих пор я заменил жизненный цикл componentDidMount()componentWillAppear(), который отлично работает.

Итак, теперь я угадываю, когда мой компонент вот-вот будет размонтирован, componentWillLeave() вызывается перед правом? Это не тот случай ..

Есть некоторые вопросы по StackOverflow о componentWillLeave и TransitionGroup жизненный цикл, но ничего, кажется, ответить на мой вопрос, и некоторые из них связаны с ошибками, которые должны были улажены в 0.14 я верю. Я уже много пробовал и много записывал на консоль, но ничего не происходит.

Вот часть моего LoadingScreen компонента:

'use strict'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import BaseComponent from './BaseComponent.js'; 

let TweenMax = require('gsap'); 

export default class LoadingScreen extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    componentWillAppear(callback) { 
     this._animateIn(callback); 
    } 
    componentWillLeave(callback) { 
     this._animateOut(callback); 
    } 
    _animateIn(callback) { 
     let node = ReactDOM.findDOMNode(this); 
     TweenMax.to(node, 0.7, {ease: Power2.easeInOut, opacity: 1, y: -75}).eventCallback('onComplete', callback);  
    } 
    _animateOut(callback) { 
     console.log('here'); 
     let node = ReactDOM.findDOMNode(this); 
     TweenMax.to(node, 0.5, {opacity: 0, x: -75}).eventCallback('onComplete', callback); 
    } 

    render() { 
    // Render stuff... 
    } 

И для вашей информации, функция визуализации родительского компонента (он использует компонент FirstChild, так что я могу использовать выражение):

render() { 
    return <TransitionGroup component={FirstChild}> 
      {this.state.isLoading ? <LoadingScreen error={this.state.hasError}/> : <VRScene images={this.state.images}/>} 
      </TransitionGroup> 
    } 

Я предполагаю, что это имеет какое-то отношение обратных вызовов, поскольку в docs состоянии:

It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup.

Я называю это рекурсивно? Я здесь что-то не так? Или это еще одна ошибка?

некоторое понимание было бы здорово :)

ТИА!

Answer 1

Вы должны указать уникальный ключ для всех детей внутри TransitionGroup. В противном случае React не сможет определить, какие дети вошли или ушли.

{this.state.isLoading ? 
      <LoadingScreen key="loader" error={this.state.hasError}/> : 
      <VRScene key="VRScene" images={this.state.images}/> 
} 

example with keys -> Works

example without keys -> Does not work