Question

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

我有一个包含2个组件的简单示例。 Projects one，它将使用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 Transition Group ：^ 15.6.2

谢谢！

Answer 1

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

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

React Transition Group无法解雇生命周期

1 个答案: