javascript - ReactCSSTransitionGroup - 如何重写 componentWillLeave(callback)？

Question

我正在尝试访问 componentWillMount Hook ，以便淡出不是过渡子元素的 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 并调用您的回调)

来自文档:

When using ReactCSSTransitionGroup, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level ReactTransitionGroup API which provides the hooks you need to do custom transitions.

检查了一下，我找不到任何东西，所以我将编写自己的组件并希望将其开源!