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

我没有用反应路由器尝试这个，但采用了类似的路由器方法。我使用TransitionGroup v1.x让它工作，并确保我的活动子组件是

反应元素
拥有自己独特的密钥

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

注意：

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

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

1 个答案: