如何从其他组件触发React组件中useEffect与useLayoutEffect的动画逻辑？

现有一个React组件，点击内部按钮后会隐藏按钮组，在显示数据前执行GSAP过渡动画，代码如下：

const myComponent = () => {
  const [hideBtns, setHideBtns] = useState(true);
  const [openPageDescription, setOpenPageDescription] = useState(true);
  const [transitionEffect, setTransitionEffect] = useState(true);
  const [showPageDescription, setShowPageDescription] = useState(false);
  const transEffect = useRef(null);
  const btns = useRef(null);

  useEffect(() => {
    if (openPageDescription) {
      setHideBtns(false);
      setTransitionEffect(true);
      const timeout = setTimeout(() => {
        setShowPageDescription(true);
      }, 530);
      return () => clearTimeout(timeout);
    }
  }, [openPageDescription]);

  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      gsap.set(".transition-effect", { background: "black" });
      gsap.to(".transition-effect", {
        duration: 0.6,
        scale: 3.5,
        // 其他动画配置
      });
    }, hideBtns);
    return () => ctx.revert();
  }, [hideBtns]);

  return (
    <div className="container" ref={transEffect}>
      <div className="btn-set-container">
        {showPageDescription && <PageDescription close={close} />}
        <div className="btn-set" ref={btns}>
          <button
            className="btn-right"
            data-id="yo"
            onClick={() => setOpenPageDescription(true)}
          >
            Page Description
          </button>
        </div>
        {transitionEffect && <div className="transition-effect"></div>}
      </div>
    </div>
  );
};

现在需要实现通过另一个独立组件的按钮点击触发上述动画流程，且确保动画每次都能正常执行。最初考虑将Effect移到共享父组件，但不确定如何处理跨组件的Effect逻辑，需要明确正确的实现思路。

核心思路是状态提升+逻辑封装，不需要直接传递Effect，而是把触发动画的状态和执行动画的逻辑抽离，让跨组件能共享触发信号：

1. 状态提升到共享父组件 #

把控制动画触发的核心状态（比如shouldTriggerAnimation）放到两个组件的共同父组件中，父组件负责管理状态，子组件通过props接收状态变化或触发函数。

2. 封装动画逻辑为自定义Hook #

将原组件中的useEffect和useLayoutEffect里的动画逻辑抽成自定义Hook，这样无论是原组件还是父组件，都可以复用这套逻辑，避免代码冗余。

3. 子组件通过props接收触发信号 #

原动画组件接收父组件传递的triggerAnimation状态，当该状态变化时执行动画；另一个触发组件则调用父组件传递的triggerAnimationHandler函数来改变状态。

具体代码实现 #

步骤1：封装动画逻辑为自定义Hook

import { useState, useEffect, useLayoutEffect, useRef } from 'react';
import gsap from 'gsap';

export const usePageTransition = () => {
  const [hideBtns, setHideBtns] = useState(true);
  const [transitionEffect, setTransitionEffect] = useState(true);
  const [showPageDescription, setShowPageDescription] = useState(false);
  const btns = useRef(null);

  // 动画触发逻辑
  const triggerAnimation = () => {
    setHideBtns(false);
    setTransitionEffect(true);
    setShowPageDescription(false); // 重置状态，确保下次动画能重新执行
    const timeout = setTimeout(() => {
      setShowPageDescription(true);
    }, 530);
    return () => clearTimeout(timeout);
  };

  // 监听hideBtns执行GSAP动画
  useLayoutEffect(() => {
    if (!hideBtns) { // 仅当隐藏按钮时执行动画
      const ctx = gsap.context(() => {
        gsap.set(".transition-effect", { background: "black" });
        gsap.to(".transition-effect", {
          duration: 0.6,
          scale: 3.5,
          // 动画完成后重置过渡元素状态
          onComplete: () => setTransitionEffect(false)
        });
      });
      return () => ctx.revert();
    }
  }, [hideBtns]);

  return {
    hideBtns,
    transitionEffect,
    showPageDescription,
    btns,
    triggerAnimation
  };
};

步骤2：共享父组件

import { useState } from 'react';
import MyComponent from './MyComponent';
import OtherTriggerComponent from './OtherTriggerComponent';

const ParentComponent = () => {
  const [shouldTrigger, setShouldTrigger] = useState(false);

  const handleTriggerAnimation = () => {
    setShouldTrigger(true);
    // 重置状态，确保下次点击能再次触发
    setTimeout(() => setShouldTrigger(false), 1000);
  };

  return (
    <div className="parent-container">
      <MyComponent shouldTrigger={shouldTrigger} />
      <OtherTriggerComponent onTrigger={handleTriggerAnimation} />
    </div>
  );
};

步骤3：改造原动画组件（MyComponent）

import { useEffect } from 'react';
import { usePageTransition } from './usePageTransition';

const MyComponent = ({ shouldTrigger }) => {
  const {
    hideBtns,
    transitionEffect,
    showPageDescription,
    btns,
    triggerAnimation
  } = usePageTransition();

  // 监听父组件传递的触发信号
  useEffect(() => {
    if (shouldTrigger) {
      triggerAnimation();
    }
  }, [shouldTrigger, triggerAnimation]);

  // 内部按钮触发逻辑
  const handleInternalTrigger = () => {
    triggerAnimation();
  };

  return (
    <div className="container">
      <div className="btn-set-container">
        {showPageDescription && <PageDescription close={() => {/* 关闭逻辑 */}} />}
        <div className="btn-set" ref={btns} style={{ display: hideBtns ? 'block' : 'none' }}>
          <button
            className="btn-right"
            data-id="yo"
            onClick={handleInternalTrigger}
          >
            Page Description
          </button>
        </div>
        {transitionEffect && <div className="transition-effect"></div>}
      </div>
    </div>
  );
};

步骤4：触发动画的其他组件（OtherTriggerComponent）

const OtherTriggerComponent = ({ onTrigger }) => {
  return (
    <button onClick={onTrigger}>
      从外部触发动画
    </button>
  );
};

关键注意点 #

• 状态重置：每次触发动画前要重置相关状态（比如showPageDescription），避免因状态已为true导致动画不执行。
• GSAP上下文管理：使用gsap.context确保动画能正确清理，避免内存泄漏。
• 触发信号去重：父组件中设置延迟重置shouldTrigger状态，防止连续点击导致的重复触发。

内容的提问来源于stack exchange，提问作者Don199