使用 dangerouslySetInnerHTML 在 React 中插入完整的 HTML答案

【问题标题】：Inserting complete HTML in React using dangerouslySetInnerHTML使用 dangerouslySetInnerHTML 在 React 中插入完整的 HTML
【发布时间】：2019-12-30 16:45:20
【问题描述】：

我看过一个example 喜欢如何使用dangerouslySetInnerHTML()。

我们在 div 中放置了一些标签（在当前示例中为锚标签），但我需要插入完整的 HTML。

以下是我通过 API 得到的响应；

<HTML>
<HEAD>
<BODY>
....
</BODY>
</HEAD>
</HTML>

我已经创建了 React 组件并创建了相应的 HTML 元素，但是单击按钮后，我会收到上面的 HTML 响应，其中将包含完整的 HTML 标记，即 HTML 标记、正文标记等（它正在制作某种图形）。

所以，我需要用现有的 HTML 插入这个新的 HTML 响应。

【问题讨论】：

“完整的 HTML”是指用收到的 HTML 替换整个页面？
是的，我需要更换它
stackoverflow.com/questions/483745/…
我不得不不同意上面的链接评论，不要混合使用 jQuery 和 React。这是一条糟糕的路。
您也可以使用 iFrame 设置 innerHtml，这样响应中的 html 标签就不会成为显示拦截器。内联框架用于在当前 HTML 文档中嵌入另一个文档。 w3schools.com/tags/tag_iframe.asp

标签： javascript html reactjs dom

【解决方案1】：

您可以使用 iframe 来显示文档。因此，例如，如果您要获取 App 组件中的数据，您可以这样做：

const App = () => {

  ... data fetching

  return (
    <iframe src={data} />
  );
}

data 变量是您从 API 端点获取的数据。

【讨论】：

【解决方案2】：

我已经使用“dangerouslySetInnerHTML”解决了这个问题。我面临的问题是我也有标签。所以，首先我需要删除所有脚本标签，然后再次分配它。

 let count = (htmlDataString.toLowerCase().match(/<script/g) || []).length;
 const extractedScriptArray = [];

      for( let i= 0 ; i< count; i++){
        let extractScript = /<script\b[^>]*>([\s\S]*?)<\/script>/gm.exec(x);
        x = x.replace(extractScript[0], "");
        extractedScriptArray.push(extractScript[1]);
      }

      this.setState({ htmlData: x }, () => {
        for (let i = 0; i < count; i++) {
          window.eval(extractedScriptArray[i]);
        }
      });

【讨论】：