ReactCSSTransitionGroup - componentWillLeave（コールバック）をオーバーライドする方法？

Question

移行中の<Home>コンポーネントの子ではないキャンバス要素をフェードアウトするために、componentWillMountフックにアクセスしようとしています。 （。予想通り<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を使用する場合は、移行を通知するためにあなたのコンポーネントのための方法はありませんアニメーションの周りに複雑なロジックを実行することができます。よりきめ細かな制御が必要な場合は、カスタムトランジションを行うために必要なフックを提供する下位レベルのReactTransitionGroup APIを使用できます。

チェックアウトしても何も見つかりませんでしたので、独自のコンポーネントを作成し、うまくいけばソースをオープンします！