Question

我试图从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"
  }
}

Answer 1

v2版react-transition-groups

中删除了自定义生命周期方法

来自迁移指南：

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

如果您更喜欢自定义生命周期挂钩，仍然可以使用v1版本，因为它仍然是主动维护的，根据文档：

替换react-addons-transition-group和。{ react-addons-css-transition-group，使用v1版本，它仍然是积极维护。该版本的文档和代码是可在v1-stable分支上找到。

React.Js TransitionGroup（react-transition-group）不起作用

1 个答案: