最小示例：從反應中打開電子窗口？

說我正在用react/redux &電子構建桌面應用程序。所以在我的電子index.html文件看起來是這樣的：最小示例：從反應中打開電子窗口？

<!DOCTYPE html> 
<html> 
... 
    <body> 

    <div id="content"></div> 

    <script src="public/js/bundle.js"></script> 
    </body> 
</html>

我最大的集裝箱作出反應（稱爲app.js）被加載到「ID =內容」股利。這到目前爲止工作得很好，但現在我想知道如何在用戶單擊我的反應應用程序中的按鈕時打開新文件對話框窗口（或任何新窗口）。

我發現了一些例子here & here，但兩者的實施例僅說明了如何從主電子進程加載該文件對話框窗口（在渲染器或主）。但是，我希望用戶使用我的React應用程序，然後，一旦他或她單擊了一個按鈕，我的應用程序就應該告訴電子產生一個新窗口，並且這個新窗口當然應該是某種程度上的我反應的一部分。

如果有人能夠在這裏提供一個最簡單的例子，以及這些東西如何協同工作，我將非常感激。

來源

2017-03-11 George Welder

反應16中的「createPortal」API將幫助你。

首先，讓我們說我們有這樣的組件：

<SubWindow> 
    <h1>bar</h1> 
</SubWindow>

然後打開（或關閉）在其生命週期方法的窗口是這樣的：

export class SubWindow extends React.Component { 
    nativeWindowObject: null; 

    componentWillMount() { 
    this.nativeWindowObject = window.open(''); 
    } 
    render() { 
    return this.nativeWindowObject ? ReactDOM.createPortal(this.props.children, this.nativeWindowObject.document.body) : null; 
    } 
}

注意：您必須設置webPreferences： {nativeWindowOpen：true}，確保「window.open」返回一個本地窗口對象。請訪問https://electronjs.org/docs/api/window-open瞭解更多信息。

來源

2017-12-01 14:42:31 user3016883

最小示例：從反應中打開電子窗口？

回答

相關問題