React集成JDoodle IDE无渲染显示空白问题求助

问题原因 #

1. React组件中直接嵌入<script>标签时，脚本执行时机可能早于目标DOM元素就绪，导致Pym.js无法找到对应的容器初始化IDE。
2. Pym.js需要手动触发子组件初始化，默认的自动初始化逻辑在React的DOM更新机制下可能失效。
3. Frame组件可能存在资源加载限制，阻止了JDoodle脚本或资源的加载。

解决方案 #

• 动态加载脚本并手动初始化Pym组件
  使用React的useEffect钩子确保DOM元素就绪后再加载脚本，并手动初始化Pym子组件，同时避免重复加载脚本：

  import { useEffect, useRef } from 'react';
  
  export function IDE(props: any) {
    const ideContainerRef = useRef<HTMLDivElement>(null);
  
    useEffect(() => {
      if (!ideContainerRef.current) return;
  
      // 检查脚本是否已加载，避免重复注入
      let script = document.getElementById('jdoodle-pym-script');
      if (!script) {
        script = document.createElement('script');
        script.id = 'jdoodle-pym-script';
        script.src = 'https://www.jdoodle.com/assets/jdoodle-pym.min.js';
        script.type = 'text/javascript';
        script.onload = initPymChild;
        document.body.appendChild(script);
      } else {
        initPymChild();
      }
  
      function initPymChild() {
        // 初始化Pym子组件，忽略全局变量的类型检查
        // @ts-ignore
        const pymChild = new Pym.Child(ideContainerRef.current);
        // 将实例挂载到容器上，方便销毁时使用
        ideContainerRef.current.pymChild = pymChild;
      }
  
      // 组件卸载时销毁Pym实例，避免内存泄漏
      return () => {
        if (ideContainerRef.current?.pymChild) {
          ideContainerRef.current.pymChild.destroy();
        }
      };
    }, []);
  
    return (
      <div
        ref={ideContainerRef}
        data-pym-src="https://www.jdoodle.com/plugin"
        data-language="java"
        data-version-index="4"
      />
    );
  }
  

• 检查Frame组件的资源限制
  确认Frame组件没有配置限制外部资源加载的规则，比如CSP（内容安全策略）或沙箱模式，确保允许加载jdoodle.com域名下的脚本和资源。

• 验证组件挂载状态
  确保IDE组件在Frame组件内被正确渲染，没有被条件渲染逻辑隐藏，或被CSS样式设置为display: none等不可见状态。

原代码失效的核心原因 #

原代码中直接在JSX里插入<script>标签，脚本执行时目标<div>可能还未完成DOM挂载，Pym.js无法找到对应的容器；同时Pym.js的自动初始化逻辑无法适配React的DOM更新流程，必须手动触发初始化才能完成IDE的渲染。

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