GSAP &ReactJ.控制台警告:未找到未定义的GSAP目标。& GSAP目标未找到

Question

我试图通过使用GSAP来简化我在另一个项目中所经历的事情。从本质上说，我在控制台中得到了2个警告。

未找到未定义的目标。没有找到目标。

我试着做一个模态，如果状态等于true，它就会呈现出来。否则，它将返回null。

我相信我的问题是因为返回空。但我不知道怎么换个方法。

我在gsap中尝试了杀死()选项，但是我没有运气。这是我读过的文档的参考资料。关于清理的Gsap文档

import React, { useRef, useEffect } from "react";
import gsap from "gsap";

export default function TestGsap(props) {
  const box = useRef();

  useEffect(() => {
    gsap.from(box.current, {
      y: "500",
      ease: "expo",
      duration: 2,
    });
  });

  if (props.toggleModal === true) {
    return (
      <div>
        <section
          ref={box}
          style={{ width: "10rem", height: "10rem", backgroundColor: "red" }}
        >
          <p>Hello, I am a red box.</p>
        </section>
      </div>
    );
  } else {
    return null;
  }
}

Answer 1

我也在Greensock论坛上发布了这个。多亏了格林斯托克的OSUblake和Admin，他才能解决我的问题。帮助别人，这就是他所说的。

您的效果是运行每次道具变化，所以您将创建一个新的动画每次，因此，当然，目标将找不到，如果它没有呈现。你需要做这样的事。

useLayoutEffect(() => {
  if (props.toggleModal) {
    gsap.from(box.current, {
      ...
    });
  }
}, [props.toggleModal])

您可以从react导入useLayoutEffect。

请查看我们的反应指南，以获得更多信息。https://greensock.com/react/