ReactCSSTransitionGroup - Wie componentWillLeave (Callback) überschreiben?

Question

Ich versuche, auf den componentWillMount -Hook zuzugreifen, um ein Canvas-Element auszublenden, das kein untergeordnetes Objekt der übergehenden <Home>-Komponente ist. (Animation von <Home> arbeitet sich wie erwartet.)

<ReactCSSTransitionGroup transitionName="screenTrans" transitionEnterTimeout={200} transitionLeaveTimeout={3000}> 
    <Home key={'home'} /> 
</ReactCSSTransitionGroup> 

Home.js:

export default class Home extends React.Component { 
    ... 
    componentWillLeave(callback) { 
     console.log("am i getting called?") // no! 
     this.fadeOutCanvas(); 
    } 
} 

Was bin ich? Danke ...

Answer 1

Ziemlich späte Antwort, aber ich bin jetzt vor dem gleichen Problem.

Die Sache ist, dass Sie ReactCSSTransitionGroup verwenden, die die Rückrufe wie ReactTransitionGroup (andere Komponente) nicht nennen. Das Problem ist, dass Sie eine Komponente benötigen würden, die sowohl (Sets CSS und rufen Ihren Rückruf) tut

Aus der Dokumentation:

Wenn ReactCSSTransitionGroup verwendet wird, gibt es keine Möglichkeit für Ihre Komponenten benachrichtigt werden, wenn ein Übergang ist beendet oder um eine komplexere Logik rund um die Animation durchzuführen. Wenn Sie eine feinere Steuerung wünschen, können Sie die ReactTransitionGroup-API auf niedrigerer Ebene verwenden, die die Hooks bereitstellt, die Sie für benutzerdefinierte Übergänge benötigen.

Herum überprüft und ich konnte nichts finden, also werde ich meine eigene Komponente schreiben und hoffentlich Open Source es!