未调用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路由器上尝试过，但使用了类似的路由器方法。我使用TransitionGroup v1.x让它工作，并确保我的活动子组件是

1. a react element
2. 有自己的唯一键

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

备注：

使用CSSTransitionGroup时，您的组件无法在转换结束时收到通知，也无法围绕动画执行任何更复杂的逻辑。如果您想要更细粒度的控制，您可以使用低级的TransitionGroup API，它提供了执行自定义转换所需的挂钩。