Question

我正在尝试为我的react应用程序实现一个'popout'功能，该功能使用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} />

所以现在我只有一个单独的页面来渲染玩家。

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

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

由于

Answer 1

你可以

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

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

1 个答案: