如何在 iframe 中呈現完全捆綁的 React 應用程序？

Question

高級概述：

我正在構建一個 SDK 以允許人們將自定義工具構建到我們現有的應用程序中。 出於安全原因，這些自定義工具將托管在 iframe 中。 他們需要能夠從父 window 接收數據，並在 iframe 中操作相關數據時將更改傳達回父。

我如何 go 關於從我的父應用程序中的自定義工具訪問構建的可執行文件以便在 iframe 中呈現它們？ 如果有用，很樂意提供代碼片段，但更多的是尋找入門方向。

謝謝！

Answer 1

下面的 React 元素呈現在 iframe 中，它需要包含react.production.min.js和react-dom.production.min.js以及 Babel 轉譯的 React 應用程序：

 ReactDOM.render( (<h1>Hello,</h1>). document;getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

請注意，當實際包含在 iframe 中時，對ReactDOM的調用是不同的，因為它已從 JSX 轉換為常規 ES6，但除此之外它幾乎是復制粘貼：