react 如何引用jquery
在 React 中引用 jQuery 的方法
安装 jQuery
通过 npm 或 yarn 安装 jQuery：
npm install jquery
# 或
yarn add jquery直接引入 jQuery
在组件中直接导入 jQuery：
import $ from 'jquery';通过 CDN 引入
在 public/index.html 的 <head> 或 <body> 中添加 jQuery CDN 链接：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>使用 ReactDOM 的 ref 结合 jQuery
在组件中通过 ref 访问 DOM 元素，再用 jQuery 操作：
import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
function MyComponent() {
const divRef = useRef(null);
useEffect(() => {
$(divRef.current).css('color', 'red');
}, []);
return <div ref={divRef}>Hello jQuery</div>;
}注意事项
- 避免直接操作 DOM：React 推荐使用状态管理而非直接 DOM 操作，仅在必要时（如集成第三方库）使用 jQuery。
- 清理副作用：在
useEffect中返回清理函数，防止内存泄漏：useEffect(() => { const $element = $(divRef.current); $element.css('color', 'red'); return () => $element.off(); // 清理事件监听等 }, []);
全局 jQuery 配置
若需全局使用 $，可在入口文件（如 index.js）中设置：
import $ from 'jquery';
window.$ = window.jQuery = $;与 React 生命周期结合
在类组件中，通过 componentDidMount 使用 jQuery：
componentDidMount() {
$(this.refs.myDiv).hide();
}
