TypeError：无法添加属性 __gsap，对象不可扩展（Gatsby + GSAP）

Question

我在进入 Gatsby 时遇到了一些麻烦（我还在学习）。我有一个运行良好的菜单动画，除了一部分。我正在为打开和关闭菜单设置动画。我已将动画移到专用函数中，因此对我来说更清晰（且可重复使用）。

我现在有 3 个函数。前两个（staggerReveal() 和 fadeInUp()）效果很好。但是第三个（staggerText）使它崩溃并抛出以下错误：“TypeError：无法添加属性__gsap，对象不可扩展”。

我已经构建了这个staggerText() 函数，就像我为其他两个函数所做的那样，它们工作正常。我在这里找不到这个函数有什么问题。我假设错误不是来自 gsap 而是来自 <Link> ？当你想在 React/Gatsby 中制作动画时，也许它不会像这样工作？

这是我的组件代码：

import React, { useEffect, useRef } from 'react';
import { Link } from 'gatsby';

import gsap from 'gsap';

const MainMenu = ({ state }) => {
  let menu = useRef(null);
  let revealMenuBackground = useRef(null);
  let revealMenu = useRef(null);
  let line1 = useRef(null);
  let line2 = useRef(null);
  let line3 = useRef(null);
  let info = useRef(null);

  useEffect(() => {
    if (state.clicked === false) {
      // close menu
      gsap.to([revealMenu, revealMenuBackground], {
        duration: 0.8,
        height: 0,
        ease: 'power3.inOut',
        stagger: 0.07,
      });
      gsap.to(menu, {
        duration: 1,
        css: { display: 'none' },
      });
    } else if (state.clicked === true || (state.clicked === true && state.initial === null)) {
      // open menu
      gsap.to(menu, {
        duration: 0,
        css: { display: 'block' },
      });
      gsap.to([revealMenuBackground, revealMenu], {
        duration: 0,
        opacity: 1,
        height: '100vh',
      });
      staggerReveal(revealMenuBackground, revealMenu);
      fadeInUp(info);
      staggerText(line1, line2, line3);
    }
  }, [state]);

  const staggerReveal = (node1, node2) => {
    gsap.from([node1, node2], {
      duration: 0.8,
      height: 0,
      ease: 'power3.inOut',
      stagger: 0.1,
    });
  };

  const fadeInUp = (node1) => {
    gsap.from(node1, {
      y: 60,
      duration: 1,
      delay: 0.2,
      opacity: 0,
      ease: 'power3.inOut',
    });
  };

  const staggerText = (node1, node2, node3) => {
    gsap.from([node1, node2, node3], {
      duration: 0.8,
      y: 100,
      delay: 0.1,
      ease: 'power3.inOut',
      stagger: 0.1,
    });
  };

  return (
    <div ref={(el) => (menu = el)} id="main-menu">
      <div
        ref={(el) => (revealMenuBackground = el)}
        className="menu-secondary-background-color"
      ></div>
      <div ref={(el) => (revealMenu = el)} className="menu-layer">
        <div className="menu-projects-background"></div>
        <div className="container">
          <div className="menu-links d-flex jc-space-between ai-start">
            <nav>
              <ul>
                <li>
                  <Link ref={(el) => (line1 = el)} to="/">
                    Homepage
                  </Link>
                </li>
                <li>
                  <Link ref={(el) => (line2 = el)} to="/about">
                    About
                  </Link>
                </li>
                <li>
                  <Link ref={(el) => (line3 = el)} to="/contact">
                    Contact
                  </Link>
                </li>
              </ul>
            </nav>
            <div ref={(el) => (info = el)} className="info">
              <h3>Infos Box</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainMenu;

Answer 1

所以我在 stackoverflow 上找到了这个帖子：Correct way to pass useRef hook to ref property

答案对我有用。我已经像这样重构了我的链接

<Link ref={line1} to="/"

然后我在我的 staggerText 函数中调用它们时在我的变量上使用了.current，如下所示：

staggerText(line1.current, line2.current, line3.current);

我不确定它是如何工作的，但它解决了我的错误！