gpt4 book ai didi

reactjs - TypeError : Cannot add property __gsap, 对象不可扩展(Gatsby + GSAP)

转载 作者:行者123 更新时间:2023-12-04 09:59:39 25 4
gpt4 key购买 nike

我在进入 Gatsby 时遇到了一些麻烦(我还在学习)。我有一个菜单动画,除了一部分之外,它几乎可以正常工作。我在打开和关闭时为菜单设置动画。我已将动画移动到专用功能中,因此对我来说更清晰(并可重复使用)。

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

我建了这个 staggerText()功能与我为其他 2 个功能所做的相同,并且它们工作正常。我在这里找不到这个函数做错了什么..我假设错误不是来自 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;

最佳答案

所以我在 stackoverflow 上找到了这个线程:Correct way to pass useRef hook to ref property

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

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

然后我用过 .current在我的 staggerText 函数中调用它们时在我的变量上,如下所示:
staggerText(line1.current, line2.current, line3.current);

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

关于reactjs - TypeError : Cannot add property __gsap, 对象不可扩展(Gatsby + GSAP),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61856839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com