将HTML/CSS GSAP导航栏迁移到React时报错$未定义的问题求助

• 该错误是因为代码中使用了jQuery的$语法绑定点击事件，但你的React项目未安装引入jQuery，因此触发ESLint的no-undef校验规则
• 除此之外你的代码还存在两处不符合React开发规范的问题：
  • GSAP动画逻辑直接写在组件外部，组件渲染前对应DOM节点还未挂载，GSAP的类选择器会找不到目标元素导致动画失效
  • Navbar函数组件没有返回JSX结构，运行时会出现渲染异常

直接用React内置的useRef、useEffect钩子替代jQuery的选择器和事件绑定，不需要额外引入依赖，修复后代码如下：

import React, { useRef, useEffect } from "react";
import "../components/Navbar.css";
import { gsap } from "gsap";
import { ExpoScaleEase, RoughEase, SlowMo } from "gsap/EasePack";

gsap.registerPlugin(ExpoScaleEase, RoughEase, SlowMo);

export const Navbar = () => {
  const toggleBtnRef = useRef(null);
  const menuRef = useRef(null);
  const oneRef = useRef(null);
  const twoRef = useRef(null);
  const t1Ref = useRef(null);

  useEffect(() => {
    // 组件挂载后再初始化动画
    t1Ref.current = gsap.timeline({ paused: true });
    
    t1Ref.current.to(oneRef.current, 0.8, {
      y: 6,
      rotation: 45,
      ease: "power3.inout"
    });
    t1Ref.current.to(twoRef.current, 0.8, {
      y: -6,
      rotation: -45,
      ease: "power3.inout",
      delay: -0.8
    });
    t1Ref.current.to(menuRef.current, 2, {
      top: "0%",
      ease: "power3.inout",
      delay: -2
    });
    t1Ref.current.staggerFrom(".menu ul li", 2, { x: -200, opacity: 0, ease: "power3.inout" }, 0.3);

    t1Ref.current.reverse();
  }, []);

  const toggleMenu = () => {
    t1Ref.current.reversed(!t1Ref.current.reversed());
  };

  return (
    <div>
      <div className="toggle-btn" ref={toggleBtnRef} onClick={toggleMenu}>
        <span className="one" ref={oneRef}></span>
        <span className="two" ref={twoRef}></span>
      </div>

      <div className="menu" ref={menuRef}>
        <div className="data">
          <ul>
            <li><a href="/" onClick={toggleMenu}>Return Home ➔</a></li>
            <li><a href="/" onClick={toggleMenu}>Companies</a></li>
            <li><a href="/" onClick={toggleMenu}>About</a></li>
            <li><a href="/" onClick={toggleMenu}>Contact Us</a></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Navbar;

如果不想修改原有jQuery逻辑，你可以手动安装引入jQuery解决报错：

1. 安装jQuery：执行命令npm install jquery
2. 在Navbar组件顶部引入jQuery：import $ from 'jquery'

注意：该方案只是解决$未定义的报错，仍需要把动画和事件绑定逻辑放到useEffect钩子内执行，否则会出现元素未挂载导致的选择器失效问题。

内容的提问来源于stack exchange，提问作者louisdev