javascript - 如何在 iframe 中呈现完全捆绑的 React 应用程序？

Question

高级概述：

我正在构建一个 SDK，以允许人们将自定义工具构建到我们现有的应用程序中。出于安全原因，这些自定义工具将托管在 iframe 中。他们需要能够从父窗口接收数据，并在 iframe 中操作相关数据时将更改传达回父窗口。

如何从我的父应用程序中的自定义工具访问构建的可执行文件，以便在 iframe 中呈现它们？如果有用，很乐意提供代码片段，但更多的是寻找入门方向。

谢谢！

标签： javascriptreactjswebpackiframecreate-react-app

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，但除此之外它几乎是复制粘贴：