React项目嵌入自定义Widget失效问题求助

核心问题分析 #

1. React异步渲染特性：你的Widget脚本在页面加载完成后立即执行，但React组件是异步挂载到DOM中的，此时带fapro-spa-link_widget类的元素还未被渲染，导致querySelectorAll无法找到目标元素。
2. 代码逻辑小错误：if(getContainers.length < 0)判断逻辑错误，元素数量不可能小于0，应改为if(getContainers.length <= 0)。

解决方案 #

方案1：手动触发Widget初始化（适用于可修改React代码的场景）

先修改Widget代码，将初始化方法暴露到全局：

window.anyFunc = {
  init: () => {
    const getContainers = document.querySelectorAll('.fapro-spa-link_widget');
    if(getContainers.length <= 0) { // 修复判断条件
        return;
    }
    getContainers.forEach((container) => {
        // 移除已有事件，避免重复绑定
        container.removeEventListener('click', container._clickHandler);
        
        const getSymbol = container.getAttribute('data-symbol');
        const clickHandler = function() {
            alert("Symbol: "+getSymbol);
        };
        
        container._clickHandler = clickHandler;
        container.addEventListener('click', clickHandler);
    })
  }
}

// 保留页面加载时的自动初始化
document.addEventListener('DOMContentLoaded', () => {
    window.anyFunc.init();
});

然后在React组件的useEffect钩子中，等待组件渲染完成后手动调用Widget初始化：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 组件渲染完成后触发Widget初始化
    window.anyFunc?.init();

    // 组件卸载时清理事件（可选）
    return () => {
      document.querySelectorAll('.fapro-spa-link_widget').forEach(container => {
        container.removeEventListener('click', container._clickHandler);
      });
    };
  }, []); // 空依赖确保只执行一次

  return (
    <>
      <button
          data-symbol="TSMC"
          className="fapro-spa-link_widget bg-red-500 m-4 text-white p-3 rounded"
      >
          Click HTML
      </button>
      <Typography
          data-symbol="TSMC"
          className="fapro-spa-link_widget bg-red-500 m-4 text-white p-3 rounded"
      >
          Click MUI
      </Typography>
    </>
  );
}

注意：React组件中需使用className替代原生HTML的class属性，你原代码中的class写法不符合React规范。

方案2：用MutationObserver自动监听DOM变化（适用于无法修改React代码的场景）

修改Widget代码，通过MutationObserver监听React根容器的DOM变化，自动检测新增的目标元素并绑定事件：

const anyFunc = {
  init: () => {
    const getContainers = document.querySelectorAll('.fapro-spa-link_widget');
    if(getContainers.length <= 0) {
        return;
    }
    getContainers.forEach((container) => {
        if (container._clickHandler) return; // 避免重复绑定事件
        
        const getSymbol = container.getAttribute('data-symbol');
        const clickHandler = function() {
            alert("Symbol: "+getSymbol);
        };
        
        container._clickHandler = clickHandler;
        container.addEventListener('click', clickHandler);
    })
  },
  observeDOM: () => {
    const rootContainer = document.getElementById('root');
    if (!rootContainer) return;

    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        // 当有新元素添加到DOM时，重新初始化Widget
        if (mutation.addedNodes.length > 0) {
          anyFunc.init();
        }
      });
    });

    // 监听根容器的子元素变化，包括子树
    observer.observe(rootContainer, {
      childList: true,
      subtree: true
    });
  }
}

// 页面加载时初始化+启动DOM监听
document.addEventListener('DOMContentLoaded', () => {
    anyFunc.init();
    anyFunc.observeDOM();
});

内容的提问来源于stack exchange，提问作者jeansyo