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);

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