0

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

1 回答 1

0

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

从迁移指南：

旧<TransitionGroup>组件通过其子组件上的自定义静态生命周期方法管理转换。在 v2 中，我们删除了该 API，以支持将<TransitionGroup>其与<Transition> 组件一起使用，并使用传统的 prop 传递在两者之间进行通信。

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

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

于 2017-12-17T18:14:03.153 回答