0

我有一个用例，我需要在另一个应用程序中呈现反应应用程序（管理员应用程序案例中的用户应用程序预览，如场景）。这两个应用程序来自相同的来源，但不同的存储库和不同的技术。我也不需要 javascript 函数，只有 HTML 和 CSS 就足够了

我尝试使用html 导入，例如

<link rel="import" href="http://example.com" />

和这样的 iframe

<iframe  src="http://example.com"></iframe>
$("#myframe").load(function() {
        var slide =document.getElementById("myframe").contentDocument;

    })

在访问时两者都给了我相同类型的 DOM 输出

<html lang="en">
<head>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

尽管使用 iframe 在 iframe 中正确呈现，但唯一的问题是我无法访问 DOM。

我理解它，因为反应应用程序总是在客户端呈现，但我想获得呈现的 DOM。那么我怎样才能访问实际呈现的 DOM？

甚至我注意到浏览器中的页面源也不提供渲染的 DOM？为什么它不显示渲染的 DOM？

4

1 回答 1

1

如果不需要 JS 功能和事件，则使用 ReactDOMServer.renderToString

 import ReactDOMServer from 'react-dom/server';

--

 this.setState({html:ReactDomServer.renderToString(<Component/>});

这将 html 作为字符串提供。

之后将 html 危险地设置为 div

 <div id="comp" dangerouslySetInnerHTML={{ __html: this.state.html }} />

完成此操作后，您将拥有 DOM 元素，但没有功能。只是供您显示的 DOM 元素。（包括 CSS）；

在这里阅读https://reactjs.org/docs/react-dom-server.html

于 2018-03-08T06:45:00.450 回答