Error: $ not defined - Javascript / React

Question

我正在将html/css gsap导航栏转换为React。这将返回以下错误:

error '$' is not defined no-undef

我似乎找不到与我的问题有关的其他指南。

import React from "react";
import "../components/Navbar.css";
import { gsap } from "gsap";
import { ExpoScaleEase, RoughEase, SlowMo } from "gsap/EasePack";
gsap.registerPlugin(ExpoScaleEase, RoughEase, SlowMo);
var t1 = gsap.timeline({ paused: true });
t1.to(".one", 0.8, {
y: 6,
rotation: 45,
ease: "power3.inout"
});
t1.to(".two", 0.8, {
y: -6,
rotation: -45,
ease: "power3.inout",
delay: -0.8
});
t1.to(".menu", 2, {
top: "0%",
ease: "power3.inout",
delay: -2
});
t1.staggerFrom(".menu ul li", 2, { x: -200, opacity: 0, ease: "power3.inout" }, 0.3);
t1.reverse();
$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
t1.reversed(!t1.reversed());
});
export const Navbar = () => {
<div>
<div className="toggle-btn">
<span className="one"></span>
<span className="two"></span>
</div>
<div className="menu">
<div className="data">
<ul>
<li><a href="/">Return Home ➔</a></li>
<li><a href="/">Companies</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</div>
</div>
</div>
}
export default Navbar;

Answer 1

有两个地方可以引用$:

$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});
$(document).on("click", "a", function () {
t1.reversed(!t1.reversed());
});

这看起来像jQuery，所以你需要添加jQuery库或将其转换为香草js。

Answer 2

不导入JQuery就不能使用$(document).on

你要么需要导入JQuery，要么找到另一个不使用$(document).on的解决方案

仅使用Javascript的解决方案

替换:

$(document).on("click", ".toggle-btn", function () {
t1.reversed(!t1.reversed());
});

与这个:

document.addEventListener('click', function(event) {
if (event.target.classList.contains("toggle-btn")) {
t1.reversed(!t1.reversed());
}
});