React Transition Group 无法触发生命周期答案

【问题标题】：React Transition Group can't fire life cycleReact Transition Group 无法触发生命周期
【发布时间】：2018-07-04 21:22:02
【问题描述】：

如何让 React Transition Group 的生命周期运转起来？

我有一个包含 2 个组件的简单示例。项目之一，它将使用 ReactTransitionGroup 和索引组件，这是我希望从 ReactTransitionGroup 接收生命周期的项目：

import React from 'react';
import Index from 'components/views/components/Index';
import TransitionGroup from 'react-addons-transition-group'

class Projects extends React.Component {

  render () {
    return (
      <div className='content'>
        <TransitionGroup>
          <Index />
        </TransitionGroup>
      </div>
    );
  }
}

还有我的索引组件：

class Index extends React.Component {
  componentWillAppear (callback) {
    console.log('will appear');
    callback();
  }

  componentDidAppear () {
    console.log('did appear');
  }

  componentWillEnter (callback) {
    console.log('will enter');
    callback();
  }

  componentDidEnter () {
    console.log('did enter');
  }

  componentWillLeave (callback) {
    console.log('will leave');
    callback();
  }

  componentDidLeave () {
    console.log('did leave');
  }

  render () {
    return (
      <div className='index'>
        <h2>Index Page</h2>
      </div>
    );
  }
}

我只需要生命周期调度。

我发现一篇关于我的问题的很棒的文章，但我无法复制结果： https://medium.com/@slapspapayas/reacttransitiongroup-explained-through-failure-629efe364866

React 版本：^16.2.0

React 插件过渡组：^15.6.2

谢谢！

【问题讨论】：

您使用“react-addons-transition-group”而不是this的任何原因？
我会使用GreenSock lib做动画，但是我需要使用React Transition Group的生命周期来控制流程（willLeave和willEnter）。
但是正如@Shirley 所说，为什么不使用推荐的新过渡组，它们通过onEvent 具有生命周期挂钩，您可以阅读文档和示例reactcommunity.org/react-transition-group

标签： javascript reactjs react-transition-group

【解决方案1】：

实际上这些生命周期已被删除。见migration 从迁移开始，子生命周期被删除。我们可以将回调传递给 Transition 组件：

<Transition
  {...props}
  onEnter={handleEnter}
  onEntering={handleEntering}
  onEntered={handleEntered}
  onExit={handleExit}
  onExiting={handleExiting}
  onExited={handleExited}
/>

【讨论】：

请提供链接中的要点，以防链接可能损坏或将来可能会删除内容。