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

Question

Я пытаюсь получить доступ к componentWillMount зацепить, чтобы затемнить элемент canvas, который не является потомком переходного <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 более низкого уровня, который предоставляет ловушки, необходимые для выполнения пользовательских переходов.

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