react 如何引用jquery

在React中引用jQuery的方法

安装jQuery依赖 通过npm或yarn安装jQuery库：

npm install jquery
# 或
yarn add jquery

直接导入使用 在组件中直接导入jQuery并调用：

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

function MyComponent() {
  useEffect(() => {
    $('#myElement').click(() => {
      alert('jQuery triggered');
    });
  }, []);

  return <div id="myElement">Click me</div>;
}

通过React的ref替代DOM操作 推荐结合React的ref减少直接DOM操作：

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

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

  useEffect(() => {
    $(elementRef.current).css('color', 'red');
  }, []);

  return <div ref={elementRef}>Styled by jQuery</div>;
}

注意事项

• jQuery的DOM操作可能与React的虚拟DOM产生冲突，建议仅在必要时使用（如集成遗留代码）。
• 避免在React的渲染逻辑中混合jQuery操作，优先使用React的状态管理。
• 对于动画等场景，可考虑使用React专用的库（如Framer Motion）替代jQuery。