React TransitionGroup KomponenteWillLeave tut nichts

Question

Ich möchte meinen Ladebildschirm mit React TransitionGroup animieren, bisher habe ich den componentDidMount() Lebenszyklus durch componentWillAppear() ersetzt, was einwandfrei funktioniert.

Also jetzt ich rate, wann immer meine Komponente wird unmounten, componentWillLeave() wird vor richtig aufgerufen? Dies ist nicht der Fall ..

Es gibt einige Fragen zu StackOverflow über componentWillLeave und TransitionGroup Lebenszyklus, aber nichts scheint meine Frage zu beantworten, und einige sind auf Fehler bezogen, die in 0,14 gepatcht hätte ich glaube. Ich habe schon viele Dinge ausprobiert und viel an der Konsole geloggt, aber nichts passiert.

Hier ist ein Teil meiner LoadingScreen Komponente:

'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... 
    } 

Und für Ihre Informationen, die Render-Funktion der übergeordneten Komponente (es die Verwendung eines Firstchild Komponente macht, so dass ich einen Ausdruck verwenden können):

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

ich es vermute, ich muss etwas mit den Rückrufe wegen der docs Zustand zu tun:

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

Kann ich diese rekursiv aufrufen? Mache ich hier etwas falsch? Oder ist das ein weiterer Fehler?

Ein Einblick wäre toll :)

TIA!

Answer 1

Sie müssen einen eindeutigen Schlüssel für alle Kinder in TransitionGroup bereitstellen. Andernfalls kann React nicht feststellen, welche Kinder eingegangen oder verlassen wurden.

{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