React集成Adobe Acrobat Sign：API获取后JSX脚本无法执行的解决方法

React渲染JSX时，不会像浏览器解析纯HTML那样自动执行<script>标签——哪怕是条件渲染出来的，这些标签只会被当作普通DOM节点，不会触发脚本的加载和执行，这就是你遇到问题的原因。下面是具体的解决方法：

核心方案：用useEffect动态创建脚本 #

利用React的useEffect钩子，在组件完成渲染（或依赖项变化时），手动创建并插入脚本元素到DOM中，这样能确保脚本被浏览器正确加载执行，同时也能处理组件重新渲染的场景。

完整代码示例 #

import { useEffect, useRef } from 'react';
import Typography from '@mui/material/Typography';

function ConsentForm() {
  const { selectedFormData } = consentFormStore;
  const widgetId = selectedFormData?.widgetId;
  // 用ref存储已创建的脚本元素，方便后续清理
  const scriptRef = useRef(null);
  const inlineScriptRef = useRef(null);

  useEffect(() => {
    if (!widgetId) return;

    // 处理内嵌测试脚本（console.log那部分）
    const inlineScript = document.createElement('script');
    inlineScript.textContent = 'console.log("foo")';
    document.body.appendChild(inlineScript);
    inlineScriptRef.current = inlineScript;

    // 处理Adobe Sign的远程脚本
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://secure.na3.adobesign.com/public/embeddedWidget?wid=${widgetId}`;
    // 可按需添加load事件监听，确认脚本加载完成
    script.onload = () => {
      console.log('Adobe Sign脚本加载完成');
    };
    document.body.appendChild(script);
    scriptRef.current = script;

    // 清理函数：组件卸载或widgetId变化时，移除旧脚本避免重复加载
    return () => {
      if (inlineScriptRef.current) {
        document.body.removeChild(inlineScriptRef.current);
        inlineScriptRef.current = null;
      }
      if (scriptRef.current) {
        document.body.removeChild(scriptRef.current);
        scriptRef.current = null;
      }
    };
  }, [widgetId]); // 依赖widgetId，变化时重新执行

  return (
    <>
      {widgetId ? (
        // 若Adobe Sign脚本需要指定渲染容器，可添加带id的div
        <div id="adobe-sign-widget-container"></div>
      ) : (
        <Typography>Something went wrong creating the document</Typography>
      )}
    </>
  );
}

关键细节说明 #

• 依赖项设置：把widgetId作为useEffect的依赖，当表单切换（widgetId变化）时，自动清理旧脚本并加载新的，适配组件重新渲染场景。
• 清理函数：必须移除旧脚本，否则多次渲染会导致重复加载脚本，引发冲突或性能问题。
• 容器元素：如果Adobe Sign脚本需要将表单渲染到指定DOM节点，可添加带id的div（如示例中的adobe-sign-widget-container），具体可参考Adobe Sign文档确认是否需要指定容器。

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