1

如何让 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

反应版本：^16.2.0

React 插件过渡组：^15.6.2

谢谢！

4

1 回答 1

0

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

<Transition
  {...props}
  onEnter={handleEnter}
  onEntering={handleEntering}
  onEntered={handleEntered}
  onExit={handleExit}
  onExiting={handleExiting}
  onExited={handleExited}
/>
于 2018-06-29T04:16:34.843 回答