如何在React JSX组件中使用外部JS与jQuery

全局通用脚本的接入方式 #

所有需要在全应用范围加载的公共外部脚本，统一存放在项目的public静态目录下，通过public/index.html完成引入，不要将这类脚本放在src目录中走Webpack打包流程。

• 存储规范：将外部JS文件放到public/js/路径下，保证和index.html中的引用路径一一对应
• 标签位置：script标签要放在</body>闭合标签之前，避免脚本执行时DOM节点未完成初始化
• 路径规则：必须用%PUBLIC_URL%占位符替换硬写的绝对路径，防止部署到非根域名下出现404

参考实现：

<!-- public/index.html 引入示例 -->
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/third-party-tool.js"></script>

针对jQuery引入后报$ is not defined的问题，只需要在使用jQuery的组件文件顶部添加全局声明/* global $ */，即可绕过ESLint的语法检测报错，无需额外修改Webpack配置。

单组件按需脚本的接入方式 #

如果外部脚本仅需要在特定组件内使用，不要全局引入增加首屏加载负担，可以在组件生命周期钩子中动态加载脚本：

• 函数组件场景：在useEffect钩子中动态创建script标签，加载前先检查是否已存在同ID的脚本节点，避免重复发起请求
• 所有对外部脚本方法的调用，必须放在脚本的onload回调中执行，不能在脚本加载完成前直接调用
• 组件卸载时可按需移除已添加的script节点，避免全局变量残留引发内存泄漏

参考实现：

import { useEffect } from 'react';

function BusinessComponent() {
  useEffect(() => {
    // 避免重复加载脚本
    const existScript = document.getElementById('custom-script-id');
    if (!existScript) {
      const script = document.createElement('script');
      script.src = `${process.env.PUBLIC_URL}/js/custom-script.js`;
      script.id = 'custom-script-id';
      // 脚本加载完成后的业务逻辑
      script.onload = () => {
        window.customScriptRun();
      };
      document.body.appendChild(script);
    }

    // 组件卸载清理
    return () => {
      if (existScript) document.body.removeChild(existScript);
    }
  }, []);

  return <div>组件渲染内容</div>;
}

jQuery接入的核心注意点：不要直接在组件中用全局选择器操作DOM。React采用虚拟DOM渲染机制，手动通过jQuery修改的DOM内容会在React下次重渲染时被覆盖。如果必须用jQuery操作组件内的DOM，需要通过ref绑定目标节点，等组件节点渲染完成后再调用jQuery逻辑操作对应节点。

高频问题排查 #

• 不要将非模块化的老旧外部JS放在src目录下用import语法引入：Webpack会默认将src目录下的文件作为ES模块解析，未遵循模块导出规范的老旧全局脚本会直接触发模块解析失败报错
• 不要盲目安装各类script加载相关的第三方npm工具：这类工具本质是对动态创建script标签逻辑的封装，自行实现仅需几行代码，额外引入依赖反而容易出现版本兼容问题
• 脚本逻辑不生效时，优先检查浏览器控制台是否存在三类问题：CORS跨域拦截、脚本路径404、脚本加载顺序错位（依赖类脚本必须早于被依赖的脚本加载完成）
• 本地调试时如果逻辑出现重复执行的问题，可临时去掉根组件的StrictMode包裹：开发环境下StrictMode会双重执行副作用逻辑，容易引发脚本重复加载、方法多次调用的问题，完成逻辑验证后可再恢复StrictMode配置

内容的提问来源于stack exchange，提问作者Hamza Bin Khurshid