如何在ReactJS组件中正确使用JQuery？

问题原因 #

虽然你已经在index.html中引入了jQuery，但React的模块隔离环境默认不会将全局的$暴露给组件，直接调用会触发$ is not undefined错误。下面是几种可行的解决方式：

方式一：通过全局window对象访问jQuery #

直接使用window.$来调用jQuery，同时要确保在组件DOM渲染完成后执行操作（避免找不到目标元素）：

类组件示例

import React, { Component } from 'react';

class MyButton extends Component {
  componentDidMount() {
    // 组件挂载完成后绑定事件
    window.$('button').click(function() {
      alert('按钮被点击');
    });
  }

  componentWillUnmount() {
    // 组件卸载前清理事件绑定，防止内存泄漏
    window.$('button').off('click');
  }

  render() {
    return <button>点击测试</button>;
  }
}

export default MyButton;

函数组件示例

import React, { useEffect } from 'react';

function MyButton() {
  useEffect(() => {
    const $ = window.$;
    $('button').click(function() {
      alert('按钮被点击');
    });

    // 清理函数：组件卸载时移除事件绑定
    return () => {
      $('button').off('click');
    };
  }, []); // 空依赖数组确保只执行一次

  return <button>点击测试</button>;
}

export default MyButton;

方式二：安装jQuery包并导入 #

如果不想依赖全局变量，可以通过npm安装jQuery后直接导入：

1. 安装依赖

npm install jquery --save

2. 组件中导入使用

import React, { useEffect } from 'react';
import $ from 'jquery';

function MyButton() {
  useEffect(() => {
    $('button').click(function() {
      alert('按钮被点击');
    });

    return () => {
      $('button').off('click');
    };
  }, []);

  return <button>点击测试</button>;
}

export default MyButton;

注意：这种方式会将jQuery打包进项目，若已在index.html中全局引入，会造成重复加载，建议二选一。

重要提醒 #

• 尽量避免在React中混用jQuery：React有自己的状态管理和事件处理机制，混用可能导致DOM与React状态不一致，引发难以排查的问题。优先使用React原生的onClick等事件绑定方式。
• 必须使用jQuery操作DOM时，务必在组件挂载完成后执行，确保目标元素已存在；组件卸载时记得清理事件绑定，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Edward Thomas