在React中导入jQuery，通常有两种方式：一种是通过npm安装jquery库，然后在项目中引入；另一种是直接在HTML文件中引入CDN链接，下面分别介绍这两种方式。
（图片来源网络，侵删）通过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!'); }); });}直接在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库。
希望以上内容能够帮助您更好地理解在React中如何导入jQuery，同时也请留言分享您对这两种方式的看法和经验，感谢阅读！
评论留言