如何在ReactJS中不借助window对象调用jQuery？

嘿，我之前也碰到过一模一样的困扰，通过CDN引入jQuery后直接用$就报错，非得加window.才行，确实有点别扭。下面给你几个优雅的解决方案：

方案1：添加全局变量声明注释 #

在你要使用$的文件（比如src/App.js）顶部加一行注释，告诉ESLint和打包工具$是全局存在的变量：

/* global $ */

class App extends Component {
  componentDidMount() {
    $("#target-element").hide(); // 现在直接用$就不会报错啦
  }
  // ...其他组件代码
}

这个方法最轻量化，不用额外安装依赖，只是给编译工具一个“$是全局变量”的提示，完全不影响代码运行逻辑。

方案2：通过npm安装并导入jQuery #

如果项目允许的话，更规范的方式是直接安装jQuery的npm包，然后在组件中按需导入：

1. 先安装依赖：

npm install jquery

2. 在src/App.js中导入并使用：

import $ from 'jquery';

class App extends Component {
  componentDidMount() {
    $("#target-element").fadeIn(); // 直接用$即可
  }
  // ...其他组件代码
}

注意：用这个方式的话，记得把public/index.html里的CDN引入删掉，避免重复加载导致冲突。

方案3：封装全局jQuery导出模块 #

如果想保留CDN引入的方式，可以封装一个小模块来统一导出全局的$，方便在各个组件中导入：

1. 新建文件src/utils/jquery.js：

// 导出window上挂载的jQuery对象
export default window.$;

2. 在需要使用的组件中导入：

import $ from './utils/jquery';

class App extends Component {
  componentDidMount() {
    $("#target-element").addClass('active'); // 直接用$就可以啦
  }
  // ...其他组件代码
}

这个方式的好处是统一管理jQuery的引入入口，以后如果要切换成npm包，只需要修改utils/jquery.js里的内容，不用改所有组件的代码。

为什么直接用$会报错？ #

其实原因很简单：React用webpack这类工具打包时，默认是模块作用域，每个文件的变量都是局部的，不会自动识别挂载在window上的全局变量。所以直接写$时，打包工具会认为这是一个未定义的局部变量，而window.$是明确访问全局对象的属性，所以不会报错。

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