如何在 reactjs 中渲染一个完整的 html答案

【问题标题】：How to render a full html in reactjs如何在 reactjs 中渲染一个完整的 html
【发布时间】：2020-06-14 11:03:19
【问题描述】：

我有一个 HTML 文件，其中包含来自服务器的字符串中的元标记、标题、正文、表单现在我的疑问是如何在 reactjs 中打开完整的 html，因为我们已经在 reactjs 中有一个主 index.html。当我尝试使用dangerouslySetInnerHTML 时，它给出了一个空白页。

【问题讨论】：

你检查了吗：reactjs.org/docs/dom-elements.html
是的，我正在使用危险的SetInnerHTML，但我的问题有点不同。我们已经有了 index.html 文件，但是从服务器我得到了一个支付网关 html，类似于 ........ 。现在，当我在 div 中使用 dangerouslySetInnerHTML 渲染它时，它会给出空白。
你可以在 iframe 中渲染它，但它很难看
如果服务器只发送 json 而客户端渲染 jsx 会更好。或者你可以把你的 spa 变成 ssr
控制台有错误吗？您可以仅选择该html文件正文的内容并将其呈现在危险的SetInnerHTML中

标签： html reactjs render

【解决方案1】：

正如我在 cmets 中提到的，您可以通过多种方式进行操作。尽管我讨厌 iframe，但它可能是适合您的解决方案。

注意：此解决方案与 React 无关

import React from "react";

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>div{
    background: red;
    color: white;
  }</style>
</head>
<body>
<div>Hello iframe</div>
</body>
</html>`

export default function App() {
  return (
    <div className="App">
     <iframe srcDoc={html} title="my-iframe"></iframe>
    </div>
  );
}

查看实时示例：here

请阅读 MDN here 中的 iframe 了解更多配置

更多关于 polyfill 的信息请联系srcDoc: here

【讨论】：

谢谢它就像魅力一样.. 但是还有一个问题是如何阅读 iframe 中的表单提交的响应。现在它在提交表单时在页面中显示 JSON 响应。这不是预期的。我的主页应该有一些监听器来获取事件。 iFrame 看起来像这样
您可以使用postMessage事件在iframe和主页developer.mozilla.org/en-US/docs/Web/API/Window/postMessage之间传递数据
我建议您联系您正在使用的第 3 方解决方案的支持人员，也许他们可以帮助您。似乎在如何实现它方面存在差距（在你这边）。
终于一切正常。我为支付集成实现了一个监听器 API。一旦侦听器收到成功响应，我就会关闭 iframe。谢谢大家的支持。在 iframe 中打开链接的解决方案有效并且还实现了监听器。