当前位置：首页 > React

react 如何引用jquery

2026-01-24 04:22:28React

在 React 中引用 jQuery

React 和 jQuery 是两种不同的库，React 基于组件化和虚拟 DOM，而 jQuery 主要操作真实 DOM。在 React 项目中引用 jQuery 需要谨慎，避免直接操作 DOM，否则可能导致 React 的状态和 DOM 不同步。

安装 jQuery

通过 npm 或 yarn 安装 jQuery：

npm install jquery
# 或
yarn add jquery

在 React 组件中引入 jQuery

在需要使用 jQuery 的组件中，通过 import 引入：

react 如何引用jquery

import $ from 'jquery';

使用 jQuery 的注意事项

避免在 React 的生命周期方法（如 componentDidMount）之外直接操作 DOM。如果需要使用 jQuery，建议在 componentDidMount 或 useEffect（函数组件）中调用。

类组件示例：

react 如何引用jquery

import React from 'react';
import $ from 'jquery';

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载后使用 jQuery
    $('#myElement').css('color', 'red');
  }

  render() {
    return <div id="myElement">Hello, jQuery!</div>;
  }
}

函数组件示例：

import React, { useEffect } from 'react';
import $ from 'jquery';

function MyComponent() {
  useEffect(() => {
    // 在组件挂载后使用 jQuery
    $('#myElement').css('color', 'blue');
  }, []);

  return <div id="myElement">Hello, jQuery!</div>;
}

避免直接操作 React 渲染的 DOM

React 通过虚拟 DOM 管理渲染，直接使用 jQuery 修改 DOM 可能导致状态不一致。如果必须使用 jQuery，尽量限制在特定的交互或第三方库集成中。

替代方案

如果只是为了简单的 DOM 操作，建议使用 React 的内置方法（如 ref）替代 jQuery：

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      myElementRef.current.style.color = 'green';
    }
  }, []);

  return <div ref={myElementRef}>Hello, React!</div>;
}