错误：$ 未定义 - Javascript / React答案

【问题标题】：Error: $ not defined - Javascript / React错误：$ 未定义 - Javascript / React
【发布时间】：2021-09-17 18:48:55
【问题描述】：

我正在将 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;

【问题讨论】：

欢迎来到 Stack Overflow。我看不到您在哪里导入 jQuery 库。我应该和其他人一起进口吗？
@Twisty 你知道如何/在哪里导入 jquery 吗？我试图通过
请看：stackoverflow.com/questions/33351288/…
这能回答你的问题吗？ Jquery in React is not defined

标签： javascript jquery reactjs

【解决方案1】：

有两个地方你引用$：

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

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

【讨论】：

【解决方案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());
    }
});

【讨论】：