Question

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

我尝试使用html imports之类的

<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。

我理解它因为react app总是在客户端渲染但我想获得渲染的DOM.So我如何访问实际渲染的DOM？

即使我注意到，即使浏览器中的页面源也没有提供渲染的DOM？为什么不向您展示渲染的DOM？

Answer 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

如何在另一个应用程序中访问实际反应呈现的DOM？

1 个答案: