react框架中如何引入jquery
在 React 中引入 jQuery
React 和 jQuery 可以共存，但需要注意避免直接操作 DOM，因为 React 使用虚拟 DOM 管理渲染。以下是引入 jQuery 的方法：
安装 jQuery 通过 npm 或 yarn 安装 jQuery：
npm install jquery或
yarn add jquery直接引入 jQuery
在组件中通过 import 引入：
import $ from 'jquery';使用 useEffect 调用 jQuery
在 React 函数组件中，通过 useEffect 确保 DOM 渲染完成后执行 jQuery 代码：
import React, { useEffect } from 'react';
import $ from 'jquery';
function MyComponent() {
useEffect(() => {
// jQuery 代码
$('#my-element').css('color', 'red');
}, []);
return <div id="my-element">Hello, jQuery!</div>;
}类组件中使用 jQuery
在类组件中，通过 componentDidMount 生命周期方法调用 jQuery：
import React from 'react';
import $ from 'jquery';
class MyComponent extends React.Component {
componentDidMount() {
$('#my-element').css('color', 'blue');
}
render() {
return <div id="my-element">Hello, jQuery!</div>;
}
}注意事项
- 避免直接使用 jQuery 修改 React 管理的 DOM 元素，可能导致渲染冲突。
- 优先使用 React 的状态管理（如
useState）而非 jQuery 的 DOM 操作。 - 如需动画或复杂效果，考虑使用 React 专用库（如
react-spring）替代 jQuery。
通过 CDN 引入（不推荐）
如果未使用模块化工具，可以在 public/index.html 中添加 jQuery CDN：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>但此方法可能导致全局污染，且难以与 React 的模块系统集成。
