时间戳

首页 > 解决方案 > 将 react 组件嵌入到没有 iframe 的网站中

reactjs - 将 react 组件嵌入到没有 iframe 的网站中

问题描述

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

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

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

任何想法如何解决它？

非常感谢。

标签： reactjs

解决方案

在这种情况下，我建议让 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。

推荐阅读