当前位置：首页 > React

react 如何引入jquery

2026-01-07 12:38:16React

安装 jQuery 库

在 React 项目中引入 jQuery 的第一步是安装 jQuery。可以通过 npm 或 yarn 安装：

npm install jquery
# 或
yarn add jquery

直接导入使用

安装完成后，在需要使用的 React 组件中直接导入 jQuery：

react 如何引入jquery

import $ from 'jquery';

通过 CDN 引入

如果不通过 npm 安装，可以在 public/index.html 中通过 CDN 引入 jQuery：

react 如何引入jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

结合 `useEffect` 使用

在 React 组件中，建议将 jQuery 代码放在 useEffect 中，以避免直接操作 DOM 导致的副作用：

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

function MyComponent() {
  useEffect(() => {
    $('.my-element').click(() => {
      alert('jQuery works!');
    });
  }, []);

  return <div className="my-element">Click me</div>;
}

避免冲突

如果项目中同时使用其他库（如 Bootstrap），需确保 jQuery 的版本兼容性。可以通过 window.$ 或 window.jQuery 全局访问：

window.$ = window.jQuery = require('jquery');

注意事项

React 推荐使用原生状态管理（如 useState）而非直接操作 DOM，仅在必要时引入 jQuery。

清理 jQuery 事件监听器，防止内存泄漏：

useEffect(() => {
const handler = () => console.log('Clicked');
$('.my-element').on('click', handler);
return () => $('.my-element').off('click', handler);
}, []);