react 如何引入jquery
在 React 中引入 jQuery 的方法
安装 jQuery 依赖
通过 npm 或 yarn 安装 jQuery 包：
npm install jquery或
yarn add jquery直接引入 jQuery
在 React 组件中直接导入 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>确保在 React 脚本之前加载 jQuery。
使用 componentDidMount 初始化
在类组件中，通过 componentDidMount 安全地操作 DOM：
componentDidMount() {
$('#example').click(() => {
alert('jQuery works!');
});
}函数组件中的用法
在函数组件中使用 useEffect 模拟 componentDidMount：
import React, { useEffect } from 'react';
import $ from 'jquery';
function MyComponent() {
useEffect(() => {
$('#example').css('color', 'red');
}, []);
return <div id="example">Hello jQuery</div>;
}注意事项
- 避免直接操作 DOM：React 推荐使用状态管理而非直接 DOM 操作。仅在必要时（如集成第三方插件）使用 jQuery。
- 清理副作用：在
useEffect或componentWillUnmount中移除 jQuery 绑定的事件监听器。 - 版本冲突：确保 jQuery 与其他库（如 Bootstrap）的版本兼容。
