在React中导入jQuery出现TypeError，componentDidMount中jQuery报错

我之前在React项目里用jQuery的时候也碰到过类似的TypeError问题，折腾了好一会儿才捋清楚，咱们一步步来排查解决：

1. 先把依赖装对！别漏了关键包 #

• 如果是纯JavaScript项目：先确认已经安装jQuery，打开终端执行：

  npm install jquery
  # 或者用yarn
  yarn add jquery
  

• 如果是TypeScript项目：除了jQuery本身，必须装对应的类型声明包，不然TypeScript会不认jQuery的类型：

  npm install @types/jquery --save-dev
  # 或者yarn
  yarn add @types/jquery -D
  

2. 选对导入方式，别再瞎试了！ #

很多时候报错就是因为导入方式不对，这里给你两种靠谱的方案：

方案一：全局导入（全项目都能用jQuery） #

如果你的项目很多地方都要用到jQuery，直接在项目入口文件src/index.js（或index.tsx）里加这段代码：

import $ from 'jquery';
// 把$和jQuery挂载到全局window对象上
window.$ = window.jQuery = $;

这样不管哪个组件里，直接用$或者jQuery就行，不用再单独导入。

方案二：组件内局部导入（只在当前组件用） #

如果只是某个组件需要用jQuery，就在组件文件顶部直接导入：

import $ from 'jquery';

然后在componentDidMount里正常用就行。

3. 排查componentDidMount里的代码坑 #

你说报错是在componentDidMount里的jQuery代码引发的，大概率是这两个问题：

• 操作的DOM元素还没真的挂载：虽然componentDidMount是DOM挂载后执行，但如果是条件渲染出来的元素（比如用{isShow && <div id="target"></div>}），可能此时元素还不存在。这种情况可以用事件委托代替直接绑定：

  componentDidMount() {
    // 不要直接写 $('#target').click(...)
    $(document).on('click', '#target', function() {
      // 你的业务逻辑
    });
  }
  

• 导入后没正确获取到jQuery函数：如果你不小心用了import * as $ from 'jquery'这种导入方式，拿到的是整个模块对象，不是真正的jQuery函数，这时候要改成import $ from 'jquery'，或者用$.default来调用：$.default('#target')（不过更推荐前者）。

4. 自定义Webpack配置的额外处理 #

如果你的项目是自己配置的Webpack（不是用create-react-app默认配置），可以通过ProvidePlugin让Webpack自动全局注入jQuery，这样连导入都省了：

const webpack = require('webpack');

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

要是按照上面的步骤还是解决不了，你可以把你的具体导入代码和componentDidMount里的报错代码贴出来，我再帮你精准定位问题！

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