当前位置：首页 > React

react 如何引入jquery

2026-01-12 12:28:49React

引入 jQuery 到 React 项目

在 React 项目中引入 jQuery 可以通过多种方式实现，但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突，因此建议仅在必要时使用 jQuery。

通过 npm 安装 jQuery

使用 npm 或 yarn 安装 jQuery 依赖：

react 如何引入jquery

npm install jquery
# 或
yarn add jquery

在组件中直接引入 jQuery

在需要使用 jQuery 的组件中直接导入：

import $ from 'jquery';

使用全局变量方式

如果需要将 jQuery 挂载到全局变量（如 window），可以在入口文件（如 index.js）中添加：

react 如何引入jquery

import $ from 'jquery';
window.$ = window.jQuery = $;

通过 CDN 引入 jQuery

在 public/index.html 中添加 jQuery CDN 链接：

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

使用 react-helmet 动态加载

通过 react-helmet 在特定组件中动态加载 jQuery：

import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      </Helmet>
    </div>
  );
}

注意事项

避免直接使用 jQuery 操作 React 管理的 DOM 元素，可能导致状态不一致。
优先使用 React 的内置功能替代 jQuery 的功能（如事件处理、DOM 操作）。
如果必须使用 jQuery，建议在 useEffect 钩子中调用，以确保 DOM 已渲染完成。

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

function MyComponent() {
  useEffect(() => {
    $('.my-element').click(() => {
      console.log('Clicked!');
    });
  }, []);

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