如何使用 React 创建一个可以实时预览小部件并生成可嵌入小部件 link 的门户

How to create a portal which can realtime preview widgets and generate widget embeddable link using React

我正在尝试构建一个门户来创建小部件。此门户将允许用户创建不同类型的小部件并实时预览该小部件的外观。

最后,该门户网站应该能够为特定小部件生成唯一 link,该小部件能够在用户粘贴时在任何地方呈现用户配置的相同小部件(例如:在线文章).

我附上了预览页面的设计供您参考。(https://drive.google.com/open?id=1lP3h5YYExrPWOcAaRmf2YupZ6qjqrINH)

请帮助我找到使用 React 实现此功能的最佳方法。

您可以使用 redux 并存储小部件预览配置(小部件名称、布局、颜色...)

因此您的预览渲染将基于存储的小部件配置文件 您的辅助部件将更新存储的配置

您的所有更新都将使用新配置重新呈现小部件预览

我想我必须创建一个单独的库项目来完成小部件渲染部分。所以可嵌入的 link 总是指向那个脚本。当有人复制 link 并将其粘贴到某个地方时,基本上它会创建 iframe 来呈现小部件。所以我们也可以用同样的方式做小部件预览部分。

有什么建议吗?