TypeError:无法添加属性__gsap，对象不可扩展(Gatsby + GSAP)

Question

我在搬到Gatsby时遇到了一些麻烦(我还在学习)。我有一个菜单动画，它工作得很好，除了其中的一个部分。我正在将菜单动画设置为打开和关闭。我已经将动画移到了专用函数中，因此对我来说更清晰(也更可重用)。

我现在有3个函数。前两个(staggerReveal()和fadeInUp())工作得很好。但是第三个(staggerText)使它崩溃并抛出以下错误："TypeError: Cannot add property __gsap，object is not extensible“。

我构建这个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);

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