React.Js TransitionGroup ( react-transition-group ) 不工作答案

【问题标题】：React.Js TransitionGroup ( react-transition-group ) is not workingReact.Js TransitionGroup ( react-transition-group ) 不工作
【发布时间】：2018-05-27 05:39:44
【问题描述】：

我正在尝试从 react-transition-group 调用特殊的生命周期挂钩来使用 gsap 实现动画。但是 TransitionGroup 组件阻止了 Box 组件的渲染，如果我从页面组件中删除了 TransitionGroup 组件，那么 Box 组件就会渲染..请帮我找出问题

import React, { Component } from 'react'
import TransitionGroup from 'react-transition-group/TransitionGroup'
import { TweenMax } from 'gsap'
import './App.css';
class Box extends React.Component {
  componentWillEnter (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback});
  }
  componentWillLeave (callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, {y: 0, opacity: 1}, {y: -100, opacity: 0, onComplete: callback});
  }
  render () {
    return <div className="box" ref={c => this.container = c}/>;
  }
}

export default class Page extends React.Component {
  state = {
    shouldShowBox: true
  };

  toggleBox = () => {
    this.setState({
      shouldShowBox: !this.state.shouldShowBox
    })
  };

  render () {
    return (
      <div className="page">
        <TransitionGroup>
          { this.state.shouldShowBox && <Box/>}
        </TransitionGroup>
        <button
            className="toggle-btn"
            onClick={this.toggleBox.bind(this)}
          >
          toggle
        </button>
      </div>
    );
  }
}

我的 package.json 是

  "name": "react-with-gsap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "classnames": "^2.2.5",
    "gsap": "^1.20.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17",
    "react-transition-group": "^2.2.1",
    "victory": "^0.24.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

【问题讨论】：

为什么不用react-motion？
@oklas，我使用过 react-motion，我喜欢这样 ..我只是想尝试 gsap 和 react 一次 .. 但是 TransitionGroup 不起作用。

标签： reactjs gsap react-transition-group

【解决方案1】：

在react-transition-groups 的v2 版本中删除了自定义生命周期方法

来自迁移指南：

旧的<TransitionGroup> 组件通过自定义管理转换其子级的静态生命周期方法。在 v2 中，我们删除了该 API 赞成要求 <TransitionGroup> 与 <Transition> 一起使用组件，并使用传统的 prop 传递进行通信两个。

如果您更喜欢自定义生命周期钩子，您仍然可以使用 v1 版本，因为它仍在积极维护中，根据文档：

对于react-addons-transition-group 和 react-addons-css-transition-group，使用v1版本，还是积极维护。该版本的文档和代码是在v1-stable 分支上可用。

【讨论】：