Как получить доступ к фактическому реагированию на DOM в другом приложении?

У меня есть сценарий использования, когда мне нужно отобразить приложение реагирования в другом приложении (предварительный просмотр пользовательского приложения в случае приложения администратора, как в сценарии). Оба приложения происходят из одного источника, но из разных репозиториев и с разными технологиями. Также мне не нужны функции 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?

Источник

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

Источник
Другие вопросы по тегам