HTML模板转React后折叠组件及侧边栏按钮失效问题求助

你遇到的问题核心是jQuery命令式DOM操作与React声明式渲染机制冲突：React重新渲染时，jQuery绑定的事件可能丢失，DOM元素也可能被替换，导致交互失效。以下是完全React化的解决方案：

1. 用React Hooks替代jQuery状态管理 #

抛弃jQuery的DOM操作，用useState管理侧边栏状态，通过状态驱动UI变化：

import { useState, useEffect } from 'react';

function Layout() {
  // 管理移动端侧边栏展开状态
  const [sidebarEnabled, setSidebarEnabled] = useState(false);
  // 管理桌面端侧边栏折叠状态
  const [isVerticalCollapsed, setIsVerticalCollapsed] = useState(false);

  // 菜单按钮点击逻辑
  const handleMenuClick = (e) => {
    e.preventDefault();
    setSidebarEnabled(prev => !prev);
    
    // 根据窗口宽度自动调整折叠状态
    if (window.innerWidth >= 992) {
      setIsVerticalCollapsed(prev => !prev);
    } else {
      setIsVerticalCollapsed(false);
    }
  };

  // 监听窗口大小变化，适配响应式
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 992) {
        setIsVerticalCollapsed(false);
      }
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 点击外部区域关闭侧边栏
  useEffect(() => {
    const handleClickOutside = (e) => {
      const menuBtn = document.getElementById('vertical-menu-btn');
      const verticalMenu = document.querySelector('div.vertical-menu');
      if (menuBtn && !menuBtn.contains(e.target) && verticalMenu && !verticalMenu.contains(e.target)) {
        setSidebarEnabled(false);
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  // 根据状态动态更新body类名
  useEffect(() => {
    document.body.classList.toggle('sidebar-enable', sidebarEnabled);
    document.body.classList.toggle('vertical-collpsed', isVerticalCollapsed);
  }, [sidebarEnabled, isVerticalCollapsed]);

  return (
    <>
      {/* 替换原按钮，绑定React点击事件 */}
      <button
        type="button"
        className="btn btn-sm px-3 font-size-24 header-item waves-effect"
        id="vertical-menu-btn"
        onClick={handleMenuClick}
      >
        <i className="mdi mdi-menu"></i>
      </button>

      {/* 侧边栏容器 */}
      <div className="vertical-menu">
        {/* 侧边栏内容 */}
      </div>
    </>
  );
}

export default Layout;

2. 修复MetisMenu下拉菜单 #

MetisMenu是jQuery插件，需在React组件生命周期中正确初始化和销毁：

import { useState, useEffect, useRef } from 'react';
import $ from 'jquery';
import 'metismenu'; // 确保已通过npm安装metismenu

function Layout() {
  const sideMenuRef = useRef(null);
  // ... 保留上面的状态和事件处理代码

  // 初始化与销毁MetisMenu
  useEffect(() => {
    if (sideMenuRef.current) {
      $(sideMenuRef.current).metisMenu();
    }
    // 组件卸载时清理插件实例
    return () => {
      if (sideMenuRef.current) {
        $(sideMenuRef.current).metisMenu('dispose');
      }
    };
  }, []);

  return (
    <>
      {/* 菜单按钮 */}
      {/* ... */}

      {/* 侧边栏菜单添加ref */}
      <div className="vertical-menu">
        <ul id="side-menu" ref={sideMenuRef}>
          {/* 示例下拉菜单结构 */}
          <li className="menu-item">
            <a href="#" className="has-arrow">
              <i className="mdi mdi-home"></i>
              <span>Dashboard</span>
            </a>
            <ul className="sub-menu">
              <li><a href="/dashboard">Default</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </>
  );
}

关键注意事项 #

• 避免混合React与jQuery操作DOM：React负责状态与UI渲染，仅用jQuery初始化第三方插件，且需在组件卸载时清理插件实例。
• 状态驱动UI：所有显示/隐藏、类名切换都通过React状态控制，不要直接调用addClass/removeClass。
• 清理副作用：所有全局事件监听、第三方插件实例，必须在组件卸载时移除，防止内存泄漏。

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