如何處理響應組件的「彈出/彈出」

我正在嘗試爲使用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} />

所以現在我有一個單獨的頁面只爲呈現球員。

但似乎沒有辦法讓我將所有道具從現有窗口傳遞到新組件（因爲它在不同的窗口上 - 我的還原狀態也被刷新）。

有沒有什麼辦法可以將道具傳遞給全新窗口中的新組件？

感謝

來源

2016-09-27 Kannaj

我認爲這是討論[這裏]（https://github.com/ReactTraining/react-router/issues/3080）。該解決方案似乎與使用'window.open'並使用'postMessage'將狀態發送到新窗口有關。 –

@CésarLandesa - 謝謝:)我會看看 – Kannaj

你可以

使用window.open（您-DOMIAN-URL ,, '_blank'，選擇= {}）
刪除其充當根DOM節點爲什麼你的反應應用程序的目標？你有頭等css等。其他方法的問題是難以向彈出窗口添加樣式。
創建一個div來加載組件，例如讓myDiv = myWindow.document.createElement（'div'）並給它一個ID
使用React.render，如果你需要傳遞一些使用的cloneElement，渲染（myComponent，myDiv.id）
5.使用後的消息在窗口之間進行通信（最好給彈出窗口一個唯一的ID並將其存儲在應用程序的狀態爲安全 - 這隻允許註冊彈出窗口到與「主」應用希望這是有益的溝通

來源

2017-07-18 14:37:37 Davet

如何處理響應組件的「彈出/彈出」

回答

相關問題