React中点击.nav li无法关闭导航栏问题求助（纯HTML环境正常）

核心冲突：React DOM 管理 vs jQuery 直接操作 #

React 会维护自身的虚拟DOM，组件重新渲染时，jQuery绑定的事件可能失效，或者React的DOM更新会覆盖jQuery的修改——这是导致问题的最直接原因。

方案1：用React状态管理替代jQuery（推荐） #

完全抛弃jQuery，用React原生的useState控制导航栏显示/隐藏，这是React的最佳实践，从根源避免DOM操作冲突。

修改后的React组件示例：

import { useState } from 'react';
import './Navbar.scss';

const Navbar = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  const toggleNav = () => setIsNavOpen(!isNavOpen);
  const closeNav = () => setIsNavOpen(false);

  return (
    <nav className={`nav ${isNavOpen ? 'nav-open' : ''}`}>
      <button className="nav-toggle" onClick={toggleNav}>菜单</button>
      <ul className="nav-list">
        <li onClick={closeNav}>首页</li>
        <li onClick={closeNav}>关于</li>
        <li onClick={closeNav}>联系</li>
      </ul>
    </nav>
  );
};

export default Navbar;

对应的SCSS仅需基于类控制显示：

.nav {
  .nav-list {
    display: none;
  }

  &.nav-open .nav-list {
    display: block;
  }
}

方案2：若必须保留jQuery，确保事件在React渲染后绑定 #

通过React的useEffect钩子，在组件渲染完成后绑定jQuery事件，同时在组件卸载时解绑，避免内存泄漏和事件失效：

import { useEffect } from 'react';
import './Navbar.scss';
import $ from 'jquery';

const Navbar = () => {
  useEffect(() => {
    const $nav = $('.nav');
    const $toggle = $('.nav-toggle');
    const $navItems = $('.nav li');

    const toggleHandler = () => $nav.toggleClass('nav-open');
    const closeHandler = () => $nav.removeClass('nav-open');

    $toggle.on('click', toggleHandler);
    $navItems.on('click', closeHandler);

    // 组件卸载时清理事件绑定
    return () => {
      $toggle.off('click', toggleHandler);
      $navItems.off('click', closeHandler);
    };
  }, []);

  return (
    <nav className="nav">
      <button className="nav-toggle">菜单</button>
      <ul className="nav-list">
        <li>首页</li>
        <li>关于</li>
        <li>联系</li>
      </ul>
    </nav>
  );
};

export default Navbar;

为什么纯HTML环境能正常工作？ #

纯HTML中的DOM是静态的，jQuery绑定的事件不会因DOM更新失效；但React中组件会根据状态重新渲染，虚拟DOM同步到真实DOM时，之前绑定的jQuery事件可能被清除，新渲染的元素也不会自动继承事件绑定。

额外提醒 #

尽量避免同时用React和jQuery操作同一部分DOM，两者的DOM管理逻辑天然冲突；优先使用React的状态和事件系统，这是React设计的核心模式，能规避绝大多数DOM相关问题。

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