如何在React.js项目中集成第三方主题及jQuery相关依赖？

报错原因 #

你当前遇到的$ is not defined报错，核心原因是通过ES模块导入的jQuery默认只存在于当前模块的局部作用域，后续导入的jQuery插件、custom.js文件无法从全局作用域获取到jQuery实例。
而你最开始在index.html插入script标签遇到的组件重载后数据不更新问题，是因为React单页应用路由切换时不会触发整页重载，全局script的初始化逻辑仅执行一次，路由切换后原DOM被React卸载重建，之前绑定的事件和插件实例全部失效。

具体解决步骤 #

1. 暴露jQuery到全局作用域 #

必须先完成jQuery的全局挂载，再导入所有依赖jQuery的第三方插件、自定义脚本，顺序不能颠倒。
如果是Create React App创建的项目，直接在入口文件（如src/index.js）顶部按如下顺序编写：

import $ from 'jquery';
// 先将jQuery挂载到全局window对象
window.$ = window.jQuery = $;

// 再导入所有依赖jQuery的插件
import 'bootstrap-select';
import 'jquery.mmenu';
import 'bootstrap-slider';
import '@material/snackbar';
import 'clipboard';
import 'magnific-popup';
import 'slick';

// 最后导入自定义脚本
import './assets/js/custom.js';

如果是自行配置webpack的项目，可以通过ProvidePlugin实现全局自动注入，无需在每个文件手动导入jQuery：

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  // 其余webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

2. 调整第三方插件的初始化逻辑 #

不要在custom.js中写全局的DOM选择、插件初始化逻辑，避免和React的DOM渲染逻辑冲突，正确做法是将插件初始化、销毁逻辑和组件生命周期绑定：

• 插件初始化放在组件挂载完成的生命周期节点（函数组件用useEffect，类组件用componentDidMount）
• 组件卸载时调用对应插件的销毁方法，避免内存泄漏
• 用ref精准定位需要操作的DOM节点，不要使用全局选择器

示例（函数组件中初始化slick轮播插件）：

import { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'slick';

const CarouselComponent = () => {
  // 用ref绑定需要初始化插件的DOM节点
  const carouselRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成、DOM存在后再初始化插件
    const $slickInstance = $(carouselRef.current).slick({
      autoplay: true,
      dots: true
      // 其余插件配置
    });

    // 组件卸载前销毁插件实例
    return () => {
      $slickInstance.slick('destroy');
    };
  }, []);

  return (
    <div ref={carouselRef}>
      {/* 轮播内容 */}
      <div>轮播项1</div>
      <div>轮播项2</div>
    </div>
  );
};

3. 注意事项 #

• 不要让React和jQuery同时修改同一个DOM节点的属性、内容，避免出现状态不一致问题
• 如果第三方主题有全局样式，直接在入口文件导入对应的CSS文件即可

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