从另一个组件调用useEffect和useLayoutEffect

Question

我有一个组件，单击按钮后，将隐藏一组按钮并在显示数据之前执行动画。

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,
        //code
      });
    }, hideBtns);
    return () => ctx.revert();
  }, [hideBtns]);

  return (
    <right 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>
    </right>
  );
};

效果很好。

但是，我现在想通过在不同组件中单击的按钮来执行该动画（它始终执行的位置）。我的第一个想法是将这两个效果放在一个共享的父组件中，但在我看来，我必须传递这些效果。传递 useEffect 和 useLayoutEffect？我以前从未遇到过这种情况。有人可以告诉我思考/解决这个问题的正确方法吗？

Answer 1

你不需要传递效果。您需要做的就是提升您的状态。

您将状态提升为在两个反应组件的最低公共祖先中拥有一个状态变量。现在，触发器组件通过单击按钮来更新状态。动画组件接收更新状态值（作为道具）。这里，两个效果以该 prop 作为依赖项运行。