javascript - 错误：$ 未定义 - 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 ➔&lt;/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;

标签： javascriptjqueryreactjs

Answer 1

有两个地方可以参考$：

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

这看起来像 jQuery，因此您需要添加 jQuery 库或将其转换为 vanilla js。