Estoy en el proceso de convertir una barra de navegación html/css gsap a React. Esto está devolviendo el siguiente error:
error '$' is not defined no-undef
Parece que no puedo encontrar ninguna otra guía sobre el tema que parezca estar relacionada con mi problema.
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;Hay dos lugares donde hace referencia a $ :
$(document).on("click", ".toggle-btn", function () { t1.reversed(!t1.reversed()); }); $(document).on("click", "a", function () { t1.reversed(!t1.reversed()); });Esto se parece a jQuery, por lo que debe agregar la biblioteca jQuery o convertir esto a vanilla js.
No puede usar $(document).on sin importar JQuery.
Debe importar JQuery o encontrar otra solución sin usar $(document).on
Reemplace esto:
$(document).on("click", ".toggle-btn", function () { t1.reversed(!t1.reversed()); });con este:
document.addEventListener('click', function(event) { if (event.target.classList.contains("toggle-btn")) { t1.reversed(!t1.reversed()); } });