将 react 组件嵌入到没有 iframe 的网站中答案

【问题标题】：Embed react component into website without Iframes将 react 组件嵌入到没有 iframe 的网站中
【发布时间】：2019-09-16 19:28:23
【问题描述】：

我的公司想要创建一个反应组件，它将呈现一个谷歌地图框架、一个搜索字段和一个结果列表。基本上是搜索、查看结果并在地图上查看。

今天创建了组件，但我们使用了很多不同的库，例如 react-router、react-redux、axios 等。

我们想找到一种不使用 iframe（如果可能）以简单的方式将我们的组件嵌入到其他网站的方法。理想情况下，我们可以只要求我们的客户添加一个具有特定 id 的 div 和我们的脚本选项卡。

有什么办法解决吗？

非常感谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

在这种情况下，我建议让 Webpack 将您的组件与您需要的任何依赖项捆绑到一个独立的 js 文件中。然后，不要像 create-react-app 那样使用典型的 app.js 或 index.js 文件将应用程序附加到 body 或 div 标签，而是专门使用 ReactDOM 根据 ID 将组件渲染到特定的 div。这样，他们只需包含您的文件并确保他们拥有带有 ID 的 div，其余部分将由它负责。我在几个不同的工作中做过类似的事情。

import ReactDOM from 'react-dom';
import MyComponent from 'my-component.js';
ReactDOM.render(<MyComponent />, '#my-div');

除此之外，它只是在修补 Webpack。

【讨论】：

如果我想分别渲染多个组件怎么办？他们会各自坐在一个回购协议上吗？
@yogescicak 这取决于您的需求。您可以渲染一个组件，该组件具有从同一存储库加载的子组件，您可以从单个存储库渲染多个组件，或者您可以分别从其自己的存储库渲染每个组件。很多可能性。