React Transition Group无法触发生命周期

Question

如何使React Transition Group的生命周期发挥作用？

我有一个包含2个组件的简单示例。 项目之一，将使用ReactTransitionGroup和Index Componente，这是我想从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

反应版本 ：^ 16.2.0

React Addons过渡小组 ：^ 15.6.2

谢谢！

Answer 1

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

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