HTML转React网站：移动端导航栏外部JS加载失效问题

问题根源分析 #

1. 脚本路径错误：你使用的../service/internalApp.js相对路径在React打包后无法正确指向资源，因为React的src目录文件会被编译打包，不能直接通过这种方式引用。
2. DOM元素获取时机不匹配：外部脚本执行时，React可能还没完成导航组件的渲染，导致document.querySelector找不到#mobile-menu和.navbar__menu，事件绑定直接失效。
3. Hook使用错误：你引入了useExternalScripts但没有在组件内调用它，所以出现未使用变量警告，Hook的逻辑根本没执行。
4. 语法错误：script.async(true)是错误写法，async是script标签的布尔属性，应该写成script.async = true。

解决方案 #

方案1：用React声明式方式处理导航（推荐） #

放弃外部脚本，直接在React组件中用状态控制菜单显示，完全符合React的设计逻辑，避免DOM操作问题：

// 在包含导航的组件（比如App.js）中
import { useState } from 'react';

function App() {
  // 用状态管理菜单激活状态
  const [isMenuActive, setIsMenuActive] = useState(false);

  // 切换菜单状态的方法
  const toggleMobileMenu = () => {
    setIsMenuActive(prevState => !prevState);
  };

  return (
    <nav className="navbar">
      {/* 汉堡按钮：根据状态添加is-active类 */}
      <div 
        id="mobile-menu" 
        className={`${isMenuActive ? 'is-active' : ''}`}
        onClick={toggleMobileMenu}
      >
        {/* 汉堡图标内容 */}
      </div>

      {/* 导航菜单：根据状态添加active类 */}
      <div className={`navbar__menu ${isMenuActive ? 'active' : ''}`}>
        {/* 你的菜单链接 */}
        <a href="/" className="navbar__link">首页</a>
        <a href="/student" className="navbar__link">学生页</a>
        {/* 其他菜单项 */}
      </div>
    </nav>
  );
}

export default App;

方案2：修复外部脚本Hook（不推荐，仅作参考） #

如果你坚持用外部脚本的方式，需要修正以下几点：

1. 调整资源路径：把internalApp.js移动到项目根目录的public/service/文件夹下（没有就创建），然后修改Hook中的脚本路径为绝对路径：

// src/hooks/userExternalScripts.js
import { useEffect } from 'react';

export default function useExternalScripts(){
    useEffect(() => {
        const script = document.createElement("script");

        // 用public目录的绝对路径
        script.src = "/service/internalApp.js";
        script.async = true; // 修正语法错误

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);
};

2. 确保组件渲染完成后执行脚本：在脚本中添加DOMContentLoaded监听，确保React渲染完成后再获取元素：

// public/service/internalApp.js
document.addEventListener('DOMContentLoaded', function() {
    const menu = document.querySelector('#mobile-menu')
    const menuLinks = document.querySelector('.navbar__menu')

    // 先检查元素是否存在，避免报错
    if (menu && menuLinks) {
        menu.addEventListener('click', function(){
            menu.classList.toggle('is-active')
            menuLinks.classList.toggle('active')
        })
    }
})

3. 正确调用Hook：在组件中调用引入的Hook，比如在App.js：

import useExternalScripts from './hooks/userExternalScripts';

function App() {
    useExternalScripts(); // 必须调用Hook，否则逻辑不执行
    // ...其他组件代码
}

总结 #

优先选择方案1，用React的状态管理代替直接操作DOM，这是React的标准实践，能避免大部分DOM渲染时机的问题，代码也更易维护。

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