如何在React单个组件中引入jQuery并解决$未定义报错

你之前的导入写法本身就不生效，核心问题有两个：

• React项目基本都基于Webpack/Vite这类构建工具运行，这类工具默认不会处理import后面的远程HTTP地址，只会去本地node_modules目录下找对应路径的资源，根本不会拉取你写的CDN上的jQuery代码
• 就算配置构建工具允许加载远程CDN脚本，jQuery的官方包默认只会把$挂到全局window对象上，不会自动注入到当前组件的模块作用域，直接调用当然会报*'$' is not defined*。

优先走本地依赖安装+局部导入的方式，构建工具会自动把jQuery代码拆分到当前组件对应的异步加载chunk里，用户访问其他页面时不会加载jQuery资源，完全不会增加其他页面的加载体积，同时$是当前文件的局部变量，不会污染全局作用域，也不会和其他库的同名变量冲突：

1. 先在项目里安装jQuery依赖

npm install jquery
# 用yarn的话执行 yarn add jquery

2. 仅在需要使用jQuery的单个组件文件中做局部导入即可：

// 只有这个文件导入了jQuery，其他组件/页面不会加载相关代码
import $ from 'jquery';
import { useEffect } from 'react';

export default function TargetComponent() {
  useEffect(() => {
    // 组件挂载后就可以正常调用jQuery，不会报未定义错误
    $('#demoDom').text('jQuery单组件引入成功');
    // 其余jQuery逻辑写在这里即可
  }, []);

  return <div id="demoDom"></div>
}

如果不想把jQuery打包进项目静态资源，可以在组件挂载时动态插入script标签加载CDN资源，等资源加载完成后再调用jQuery逻辑，避免加载时序导致的报错。这种方式只有用户访问到当前组件时才会拉取jQuery资源，同样满足性能要求：

import { useEffect, useState } from 'react';

export default function TargetComponent() {
  // 标记jQuery是否加载完成
  const [isJqLoaded, setIsJqLoaded] = useState(!!window.jQuery);

  useEffect(() => {
    if (window.jQuery) return;
    // 动态创建script标签加载CDN资源
    const jqScript = document.createElement('script');
    jqScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js';
    jqScript.onload = () => setIsJqLoaded(true);
    document.body.appendChild(jqScript);

    // 组件卸载时可选移除script标签，仅当项目其他位置完全不用jQuery时再执行移除逻辑
    return () => {
      // document.body.removeChild(jqScript)
    }
  }, []);

  useEffect(() => {
    if (!isJqLoaded) return;
    // 资源加载完成后再使用jQuery
    const $ = window.jQuery;
    $('#demoDom').text('CDN方式引入jQuery成功');
  }, [isJqLoaded]);

  return <div id="demoDom"></div>
}

注意：所有jQuery相关的DOM操作逻辑，都要放到组件挂载完成后的生命周期（useEffect/componentDidMount）里执行，不要直接写在render逻辑中，避免找不到真实DOM节点。

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