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

问题描述

我正在查看有关如何使用 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,opacity: 1},{y: -100,opacity: 0,onComplete: callback});
  }

  render () {
    return <div className="Box" ref={c => this.container = c}/>;
  }
}

如何在函数式组件中调用 componentwillEnter 和 componentwillLeave 钩子？

解决方法

好吧，我终于找到了如何将 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