react如何引入jq
在 React 中引入 jQuery
React 和 jQuery 可以共存，但需要注意避免直接操作 DOM，因为 React 使用虚拟 DOM 管理渲染。以下是引入 jQuery 的方法：
安装 jQuery
通过 npm 或 yarn 安装 jQuery：
npm install jquery
# 或
yarn add jquery在组件中引入 jQuery
在需要使用 jQuery 的组件中直接导入：
import $ from 'jquery';使用 jQuery 与 React 结合
在 componentDidMount 生命周期或 useEffect Hook 中使用 jQuery，确保 DOM 已渲染完成：
类组件示例：
import React, { Component } from 'react';
import $ from 'jquery';
class MyComponent extends Component {
componentDidMount() {
$('#myElement').css('color', 'red');
}
render() {
return <div id="myElement">Hello, jQuery!</div>;
}
}函数组件示例：
import React, { useEffect } from 'react';
import $ from 'jquery';
function MyComponent() {
useEffect(() => {
$('#myElement').css('color', 'blue');
}, []);
return <div id="myElement">Hello, jQuery!</div>;
}注意事项
- 避免直接修改 React 管理的 DOM 元素，优先使用 React 的状态和属性。
- 如果需要动态内容，尽量使用 React 的
state和props，而非 jQuery 的 DOM 操作。 - 清理 jQuery 事件或插件时，在
componentWillUnmount或useEffect的清理函数中进行。
通过 CDN 引入 jQuery
如果不使用 npm，可以在 public/index.html 中添加 CDN 链接：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>然后在代码中通过 window.$ 访问：
componentDidMount() {
window.$('#myElement').hide();
}
