react-transition-group生命周期方法componentWillLeave不被调用

Question

我正在尝试让componentWillLeave被调用，但我没有运气。 componentWillAppear被调用，但是我无法让前者调用。 我见过的大多数响应都要求确保正在执行回调。 如果这有所作为，我也正在使用React路由器。 任何帮助将不胜感激。

import React, { Component } from 'react';
import { TweenMax } from 'gsap';
import PropTypes from 'prop-types';

import { Animated } from '../../components/common/Animated';
import NavButton from '../../components/navButton/NavButton';

import './Team.scss';

class Team extends Component {

  componentDidMount() {
    this.el = this.refs.container;
  }

  componentWillAppear(callback) {
    TweenMax.set(this.el, { x: '100%' });
    TweenMax.to(this.el, 1, { x: '0%' });
    callback();
  }

  componentWillLeave(callback) {
    TweenMax.to(this.el, 1, { x: '-100%', onComplete: callback });
  }

  render() {
    const { match } = this.props;
    return (
      <div ref="container" className="teamContainer">
        <NavButton
          title={'To Interactive'}
          route={`/${match.params.monster}/interactive`}
        />
      </div>
    );
  }
}

Team.propTypes = {
  match: PropTypes.shape({
    pathname: PropTypes.shape({
      monster: PropTypes.number.isRequired,
    }),
  }),
};

Team.defaultProps = {
  match: {
    pathname: {
      monster: -1,
    },
  },
};

export default Animated(Team);

Answer 1

我还没有尝试过使用React Router，但是使用了类似的Router方法。 我使用TransitionGroup v1.x使其工作，并确保我的活动子组件是

1. 反应元素
2. 有自己独特的钥匙

https://github.com/reactjs/react-transition-group/tree/v1-stable

注意：

使用CSSTransitionGroup时，无法在过渡结束时通知您的组件，也无法对动画执行任何更复杂的逻辑。 如果需要更细粒度的控件，则可以使用较低级别的TransitionGroup API，该API提供进行自定义过渡所需的钩子。