reactjs - TypeError : Cannot add property __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);

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