使用React组件创建iframe小部件

Question

我在React中做了一个可以嵌入到其他人网站上的小工具(想想网页右下角的漂移/对讲聊天)。首先，有一个按钮，然后当它被点击时，会弹出一个表单。按钮和表单都在<Widget />组件中。

我现在正在尝试将其放入iframe中，并将应用程序捆绑到一个.js文件中，这样其他人就可以将其嵌入到他们的网站上，如下所示：

<script src="https://website.com/widget.js">
<script>
    Widget.mount({id: 1})
</script

widget.js文件是实际的应用程序，而它下面的脚本是用来传入一些属性的。

我遇到的问题是如何将Widget组件放入iframe中，并根据按钮或表单是否显示来调整iframe的大小。我尝试过使用诸如react-frame-component和react-frame这样的库，但似乎都不起作用。Zoid也是我尝试过的东西，但似乎我不能为按钮/表单动态调整iframe的大小。

有人有什么建议吗？任何帮助都将不胜感激。

Answer 1

我在几个月前就有过这个问题，所以我可以理解你对整个过程的困惑。

对我来说，这是一个改变游戏规则的资源(由直接使用漂移小部件的人编写)：https://medium.com/@ryan.da.baker/how-to-build-an-embedded-widget-with-react-redux-52a26604ccca

您还可以使用他引用的Weasl小部件源代码作为整个过程的指南：https://github.com/Rdbaker/weasl-widget

如果你在看完这篇文章后有什么问题，请试着联系我，但不太确定该怎么做。