如何在另一个应用程序中访问实际反应渲染的 DOM？答案

【问题标题】：How to access the actual react rendered DOM in another application?如何在另一个应用程序中访问实际反应渲染的 DOM？
【发布时间】：2018-03-08 06:39:09
【问题描述】：

我有一个用例，我需要在另一个应用程序中呈现反应应用程序（管理员应用程序案例中的用户应用程序预览，如场景）。这两个应用程序来自相同的来源，但不同的存储库和不同的技术。我也不需要 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 应用程序总是在客户端呈现，但我想获取呈现的 DOM。那么如何访问实际呈现的 DOM？

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

【问题讨论】：

目前还不清楚您真正想要完成什么，但很清楚的是，您正在尝试在一个不是为它设计的场景中使用 ReactJs。直接访问/修改 DOM 违背了 React 设计的所有原则。
@Claies 简而言之，我需要启用一个用户应用程序预览功能，该功能对 Rails 中的管理应用程序做出反应。
我还是一头雾水。您希望服务器（rails）渲染客户端（react）DOM，然后让 rails 以某种方式修改该 DOM？这似乎倒退了。
不，管理应用程序具有完整的堆栈导轨（包括视图），并且有一个完全不同的用户应用程序（具有反应和导轨）。两个应用程序之间没有关系，除了它来自相同起源。我需要在管理应用中设计用户应用预览
听起来你仍然在试图强迫某些本不应该发生的事情发生。你并没有真正解释为什么你认为你需要访问渲染应用程序的 DOM，除此之外，如果你认为你需要操作 DOM，那么你可能完全错过了 ReactJs 的要点。 React 使用 Shadow DOM 来控制更新的渲染方式，这就是为什么原始 DOM 基本上是空的。

标签： javascript reactjs iframe react-dom html-imports

【解决方案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

【讨论】：

听起来不错，但渲染它的应用程序是 rails 应用程序。要渲染的应用程序是反应应用程序，所以不知道如何将这种方法用于 rails
你的网络服务器是什么？阿帕奇？节点？
Apache 网络服务器
我已经发送了一个节点服务器来为我提供这个 html。但对你来说不可能
使用rails查看服务器端渲染github.com/reactjs/react-rails