如何在功能组件中使用 ReactTransitionGroup 回调答案

【问题标题】：How to use ReactTransitionGroup callbacks in functional components如何在功能组件中使用 ReactTransitionGroup 回调
【发布时间】：2021-04-01 05:19:37
【问题描述】：

我正在查看有关如何使用 TransitionGroup 插件的示例，但我能找到的所有示例都包含类组件和相当古老的文章。例如，您将如何将此类组件重构为 ES6 功能组件并使用正确的 ReactTransitionGroup 挂钩来实现相同的功能？

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}/>;
  }
}

如何在功能组件中调用componentWillEnter和componentWillLeave钩子？

【问题讨论】：

见这里：stackoverflow.com/questions/31374033/…
@BabakYaghoobi 好吧，您提供的链接根本没有回答我的问题。我不是问 ReactTransitionGroup 中可用的钩子，我问的是如何将它与 ES6 功能组件一起使用
我不认为您所指的低级 API 是当今推荐的做法。你看过react-gsap吗？据我了解，这是您的 TweenMax thingy 的开源包装器。
@Martin 好吧，我只是想知道使用 ES6 功能组件的正确方法是什么。顺便说一句，TweenMax 已经过时了。

标签： reactjs react-transition-group

【解决方案1】：

好吧，我终于找到了如何将 ReactTransitionGroup 与 ES6 功能组件一起使用，这是一个示例：

      <Transition
        timeout={1000}
        mountOnEnter
        unmountOnExit
        in={isActiveRow} //Here we specify condition when to show component
        addEndListener={(node, done) => {
          gsap.to(node, {
            duration: 0.5,
            height: isActiveRow ? "130px" : 0,
            autoAlpha: isActiveRow ? 1 : 0,
            onComplete: done,
          });
        }}
        onEntering={(node) => {
          gsap.fromTo(
            node,
            {
              duration: 1,
              height: 0,
              autoAlpha: isActiveRow ? 0 : 1,
            },
            { height: "130px" }
          );
        }}
      >
        /*The component you want to show*/
        <YourComponent />
      </Transition>

要了解有关不同可用挂钩的更多信息，请查看here

【讨论】：