ReactCSSTransitionGroup - как переопределить компонентWillLeave (обратный вызов)?

Question

Я пытаюсь получить доступ к крюку componentWillMount, чтобы затухать элемент холста, который не является дочерним элементом компонента <Home>. (Анимация <Home> сама работает, как ожидалось.)

<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(); 
    } 
} 

Что я упускаю? Спасибо ...

Answer 1

Довольно поздний ответ, но сейчас у меня такая же проблема.

Дело в том, что вы используете ReactCSSTransitionGroup, который НЕ вызывает обратные вызовы, такие как ReactTransitionGroup (другой компонент). Проблема заключается в том, что вам потребуется компонент, который делает оба (наборы CSS и вызывает ваш обратный вызов)

Из документов:

При использовании ReactCSSTransitionGroup, нет никакого способа для ваших компонентов, чтобы получать уведомления при переходе закончил или выполнил более сложную логику вокруг анимации. Если вы хотите более мелкомасштабный контроль, вы можете использовать API ReactTransitionGroup более низкого уровня, который обеспечивает перехваты, необходимые для выполнения пользовательских переходов.

Проверено и я ничего не могу найти, поэтому я напишу свой компонент и, надеюсь, с открытым исходным кодом!