React中使用jQuery CDN及动态节点与脚本执行问题解决

1. CDN引入jQuery并在React中全局调用 #

• 在public/index.html的<body>（root容器之前）按顺序引入CDN脚本：

  <!-- 先引入jQuery核心 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- 再引入依赖jQuery的日期选择器脚本 -->
  <script src="你的日期选择器CDN地址"></script>
  

• 在React组件中访问全局jQuery：
  • 直接通过window.$调用，规避ES模块作用域限制
  • 或在文件顶部添加全局声明，让编译器识别$：

    /* global $ */
    function Sample2() {
      // 直接使用$操作DOM
    }
    

2. 访问React动态创建的jQuery节点 #

React DOM元素动态生成，推荐用useRef精准获取节点，避免全局选择器的不确定性：

import { useRef, useEffect } from 'react';

function Sample2() {
  const datePickerRef = useRef(null);

  useEffect(() => {
    if (datePickerRef.current) {
      // 用jQuery包装真实DOM节点
      $(datePickerRef.current).datePicker();
    }
  }, []);

  return (
    <input 
      type="text" 
      ref={datePickerRef} 
      placeholder="选择日期"
    />
  );
}

若必须使用ID选择器，务必在组件渲染完成后执行选择逻辑（放在useEffect内）。

3. React渲染完成后执行脚本 #

利用useEffect钩子的空依赖项，实现组件首次渲染完成（DOM挂载完毕）后执行初始化：

import { useEffect } from 'react';

function Sample2() {
  useEffect(() => {
    // 初始化日期选择器
    $('#startDatePicker').datePicker();

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      $('#startDatePicker').datePicker('destroy');
    };
  }, []); // 空依赖=仅挂载时执行一次

  return <input id="startDatePicker" />;
}

4. 组件每次显示时执行脚本 #

react-router跳转时组件可能仅隐藏而非卸载，需监听路由变化触发重初始化：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function Sample2() {
  const location = useLocation();

  useEffect(() => {
    // 匹配当前路由时执行初始化
    if (location.pathname === '/sample2') {
      // 先销毁旧实例再重建
      $('#startDatePicker').datePicker('destroy');
      $('#startDatePicker').datePicker();
    }
  }, [location.pathname]); // 监听路由路径变化

  return <input id="startDatePicker" />;
}

若通过条件渲染控制组件显示，可将显示状态作为useEffect的依赖项，状态变化时触发初始化。

内容的提问来源于stack exchange，提问作者이정훈