【问题标题】:Pop out a react component into a new window在新窗口中弹出一个反应组件
【发布时间】:2019-03-06 22:13:03
【问题描述】:

我想知道是否可以将具有整个 Redux Store 等的 React 组件弹出到带有 iframe 的新窗口中。

这可能是不可能的,但我想看看是否有人知道实现这一目标的方法?

我想将 React 组件/应用程序弹出到新窗口的原因是我可以在将用户重定向到另一个 URL/域时保持 React 应用程序的运行。

我的 React 应用程序/组件使用 <script> 标记和 CDN 附加到我们捆绑的 React 应用程序的车把模板。

【问题讨论】:

  • 您可以使用localStorage在本地存储应用程序的状态,也可以将其发送到服务器。然后在 iFrame 中正常加载应用程序,如果它检测到存储的版本,则加载它以从中断处继续
  • 我认为将状态存储到本地存储中并不能解决所有问题。原因是 Zendesk 模板上的我的 React 应用程序/组件是一个聊天小部件,我正在使用 SDK API 来初始化一个聊天。我不认为我可以简单地将 SDK 提供的 Chat 对象保存到存储中并从 iframe 中读取它

标签: javascript reactjs


【解决方案1】:

你可以使用React Portal打开一个新窗口并在React树下维护它。

这是一篇半长的帖子,请查看此帖子。
Using a React 16 Portal to do something cool

您可以打开一个新窗口,做您需要做的事情,然后将用户转到另一个 URL,这不会影响您原来的窗口。

【讨论】:

  • 当您说将用户转发到不同的 URL 时,您的意思是在另一个选项卡/窗口中打开该 URL?为了清楚我需要做的是,我位于把手模板中的 React 应用程序是一个聊天小部件。当用户单击车把模板中某个点的按钮时,我想将用户重定向到具有车把页面的同一选项卡中的另一个 URL/域,然后弹出 React Chat Widget Application/Component
  • 我忘了说我没有使用 React 16
  • 链接不再起作用,但在hackernoon 中使用“react portal”之类的短语进行简单搜索,您会看到许多关于它的有趣文章。
  • @JoséAlvarez:链接现已修复。 Ty 指出来
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-12-22
  • 2012-12-12
  • 2019-04-14
  • 1970-01-01
  • 2021-06-10
相关资源
最近更新 更多