求助：React中渲染外部HTML文件时Script标签无法生效

问题根源 #

React的dangerouslySetInnerHTML仅会渲染HTML结构，浏览器不会自动执行通过该方式插入的<script>标签——这是浏览器的安全机制，也是React的默认设计，避免恶意脚本执行或意外的代码行为。

解决方法 #

方法1：手动提取并执行脚本内容 #

当外部HTML加载并渲染后，手动提取其中的脚本代码，通过创建新的<script>元素插入到文档中触发执行。修改你的组件代码如下：

import { useState, useEffect } from "react";

export default function App() {
  const [html, setHtml] = useState("");

  useEffect(() => {
    fetch("/test.html")
      .then((res) => res.text())
      .then(setHtml);
  }, []);

  useEffect(() => {
    if (!html) return;
    const container = document.getElementById("html-container");
    if (!container) return;

    // 遍历所有插入的script标签
    const scripts = container.querySelectorAll("script");
    scripts.forEach(script => {
      const newScript = document.createElement("script");
      
      // 处理内联脚本
      if (script.textContent) {
        newScript.textContent = script.textContent;
      }
      // 处理外部引入的脚本
      if (script.src) {
        newScript.src = script.src;
      }

      // 插入到文档中执行脚本
      document.body.appendChild(newScript);
      // 移除原标签避免重复执行
      script.remove();
    });
  }, [html]);

  return (
    <div className="App">
      <h1>Load external HTML into React</h1>
      <div id="html-container" dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

方法2：使用iframe加载外部HTML #

如果外部HTML包含复杂的脚本依赖或样式，直接用iframe加载是更省心的方案，iframe会完整执行内部的所有脚本：

export default function App() {
  return (
    <div className="App">
      <h1>Load external HTML into React</h1>
      <iframe src="/test.html" width="100%" height="600" frameBorder="0"></iframe>
    </div>
  );
}

注意：该方案要求HTML文件与React应用同域，若跨域需额外配置CORS或使用postMessage进行跨域通信。

安全提示 #

无论使用哪种方法，都要确保外部HTML的来源完全可信——直接执行外部脚本存在XSS攻击风险，切勿加载未知来源的HTML内容。

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