React如何加载并渲染包含脚本的外部HTML文件？

当你用dangerouslySetInnerHTML渲染HTML时，React出于安全和性能考虑，不会自动执行其中的<script>标签代码，下面是几种可行的解决办法：

方法一：手动提取并执行脚本 #

渲染HTML后，手动提取其中的脚本内容，创建新的<script>元素插入DOM，触发执行：

import { useEffect, useRef } from 'react';

function HtmlWithJs({ html }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current || !html) return;

    // 插入HTML内容
    containerRef.current.innerHTML = html;

    // 处理所有script标签
    const scripts = containerRef.current.querySelectorAll('script');
    scripts.forEach(oldScript => {
      const newScript = document.createElement('script');
      // 复制原脚本的属性（比如src、type等）
      Array.from(oldScript.attributes).forEach(attr => {
        newScript.setAttribute(attr.name, attr.value);
      });
      // 复制脚本内容
      newScript.textContent = oldScript.textContent;
      // 替换旧标签，避免重复执行
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  }, [html]);

  return <div ref={containerRef} />;
}

// 使用示例
// <HtmlWithJs html={sample.html} />

注意：必须确保HTML来源完全可信，避免XSS风险；如果脚本依赖外部库（如jQuery），要保证这些库已在页面中加载。

方法二：用iframe隔离渲染 #

把HTML内容作为iframe的srcDoc属性值，iframe会完整解析并执行其中的脚本，还能和主应用环境隔离：

function HtmlWithJsIframe({ html }) {
  return (
    <iframe
      srcDoc={html}
      title="HTML with JS"
      style={{ border: 'none', width: '100%', minHeight: '500px' }}
    />
  );
}

// 使用示例
// <HtmlWithJsIframe html={sample.html} />

注意：iframe的样式可按需调整；如果HTML引用了外部资源，需处理跨域问题；主应用和iframe间的通信需要通过postMessage实现。

方法三：抽离脚本逻辑（适用于可控HTML） #

如果HTML是你自己编写的，建议把脚本逻辑从HTML中抽离，在React组件内通过useEffect执行，HTML结构仍用dangerouslySetInnerHTML渲染：

import { useEffect } from 'react';

function ControlledHtmlWithJs() {
  // 抽离的JS逻辑
  useEffect(() => {
    // 这里写原来HTML中的脚本代码，比如：
    document.getElementById('demo').textContent = '脚本执行成功';
  }, []);

  // HTML结构
  const htmlContent = `
    <div id="demo"></div>
  `;

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

这种方式更符合React的开发模式，也更易维护。

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