在React中导入jQuery，通常有两种方式：一种是通过npm安装jquery库，然后在项目中引入；另一种是直接在HTML文件中引入CDN链接，下面分别介绍这两种方式。
（图片来源网络，侵删）
1、通过npm安装jquery库
需要在项目中安装jquery库，打开命令行工具，进入到项目根目录，然后执行以下命令：
npm install jquery save
安装完成后，就可以在项目中引入jquery库了，在需要使用jquery的组件中，可以使用import语句引入jquery库，如下所示：
import $ from 'jquery';
接下来，就可以像在普通JavaScript项目中一样使用jquery了，可以使用$选择器来操作DOM元素：
componentDidMount() {
$(document).ready(function() {
$('button').click(function() {
alert('Hello, World!');
});
});
}
需要注意的是，由于React和jQuery都使用了$符号作为全局变量，因此在React中使用jquery时，需要使用jQuery.noConflict()方法来解决命名冲突问题，修改后的代码如下：
import $ from 'jquery';
import 'jquery/src/jquery'; // 引入jquery库的完整路径
$.noConflict(); // 使用jQuery.noConflict()方法解决命名冲突问题
componentDidMount() {
$(document).ready(function() {
jQuery('button').click(function() {
alert('Hello, World!');
});
});
}
2、直接在HTML文件中引入CDN链接
除了通过npm安装jquery库外，还可以直接在HTML文件中引入CDN链接，在项目的public文件夹下创建一个名为index.html的文件，然后在该文件中添加以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>React App</title> <!引入jQuery CDN链接 > <script src="https://code.jquery.com/jquery3.6.0.min.js"></script> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html>
接下来，在React组件中，可以直接使用window.$来访问jQuery对象。
componentDidMount() {
$(document).ready(function() {
window.$('button').click(function() {
alert('Hello, World!');
});
});
}
需要注意的是，这种方式可能会导致项目的构建体积变大，因为每次构建都需要下载jQuery库，如果项目对构建体积有严格要求，建议使用第一种方式通过npm安装jquery库。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/360372.html
微信扫一扫