如何处理反应组件的“弹出/弹出”答案

【问题标题】：How to handle 'popout/popup' of react component如何处理反应组件的“弹出/弹出”
【发布时间】：2016-09-27 11:45:30
【问题描述】：

我正在尝试为我的 react 应用程序实现一个“弹出”功能，该应用程序使用 video.js 提供流媒体服务。

本质上，下面的组件会在网站上呈现视频流。

              <Player
                ready={this.props.ready}
                stream={stream}
                streamName={ streamName }
                ownStream={this.props.ownStream}
                ref={`player-${stream.id}`}
                unmount={this.props.unmount}
                isSignedIn={this.props.isSignedIn}
                dispatch={this.props.dispatch}
                />

点击弹出图标后，我希望在新窗口中只打开视频（而不是页面上的任何其他组件）。

所以我在我的路由文件中实现了以下内容

<Route path="/watch/popout_stream/:streamId" component={StreamPopout} />

所以现在我有一个单独的页面，仅用于渲染播放器。

但是我似乎没有办法将我所有的道具从现有窗口传递到新组件（因为它在不同的窗口上 - 我的 redux 状态也被刷新了）。

有什么方法可以在一个全新的窗口中将道具传递给新组件？

谢谢

【问题讨论】：

我认为这是在讨论here。该解决方案似乎与使用window.open 并将带有postMessage 的状态发送到新窗口有关。
@CésarLandesa - 谢谢 :) 我会看看

标签： javascript reactjs react-router

【解决方案1】：

你可以

使用 window.open (your-domian-url,, '_blank', options={})
删除作为 React 应用程序目标的根 dom 节点，为什么？您在 headers 中有 css 等。其他方法的一个问题是很难将样式添加到弹出窗口。
创建一个 div 来加载您的组件，例如让 myDiv = myWindow.document.createElement('div') 并给它一个 id
使用 React.render 并且如果您需要在使用 cloneElement 时传递一些道具，例如渲染（myComponent，myDiv.id）
5.使用post Message在窗口之间进行通信（最好给弹出窗口一个唯一的id并将其存储在应用程序的状态中）安全性 - 即只允许注册的弹出窗口与“主”应用程序通信希望有用

【讨论】：