問題描述
假設我正在使用 react/redux & 構建一個桌面應用程序.電子.所以我在電子中的 index.html 文件看起來像這樣:
<!DOCTYPE html><html>...<身體><div id="content"></div><script src="public/js/bundle.js"></script></身體></html>我最大的 React 容器(稱為 app.js)被加載到 'id=content' div 中.到目前為止這工作正常，但現在我想知道當用戶單擊我的反應應用程序中的按鈕時如何打開一個新的文件對話框窗口(或任何新窗口).
我發現了一些例子here &這里，但是這兩個示例都只說明了如何從主電子進程(在渲染器或主進程中)加載文件對話框窗口.
但是，我希望用戶與我的 React 應用程序互動，然后，一旦他或她點擊一個按鈕，我的應用程序應該告訴電子產生一個新窗口，這個新窗口當然應該以某種方式成為一部分我的反應應用程序.
如果有人能在這里提供一個最小的例子，說明這些如何協同工作，我將不勝感激.
點擊按鈕在新窗口中打開 React 組件并檢測窗口何時關閉 因為組件不會簡單地調用 componentWillUnmount 當你關閉窗口時 你的應用應該是這樣的
App.js
導出默認類 App 擴展 React.Component {構造函數(道具){超級(道具)；這個.state = {//跟蹤新窗口是否打開或關閉isNewWindow:假，};}使成為() {返回(//onClose 將在新窗口關閉時觸發//NewWindowComponent 中的所有內容都被認為是 props.children 并且將是//在新窗口中顯示{(this.state.isNewWindow) &&<新窗口組件onClose={() =>this.setState({ isNewWindow: false })><h2>這將顯示在一個新窗口中</h2></新窗口組件>}<按鈕onClick={() =>this.setState({ isNewWindow: true })}>在新窗口中打開</按鈕>)}}NewWindowComponent.js
導出默認類 NewWindowComponent extends Component {//創建一個容器 對于窗戶private containerEl = document.createElement('div');//這將保留窗口的引用私人外部窗口=空；//當組件掛載時，打開一個新窗口組件DidMount() {//window.open 中的第二個參數是可選的，可以設置為任意一個//你想要的值.當我們修改 main 時你會注意到這個值的使用//electron.js 文件this.externalWindow = window.open('', 'NewWindowComponent ');//附加容器 div 并注冊將觸發的事件//窗口關閉如果(this.externalWindow){this.externalWindow.document.body.appendChild(this.containerEl);this.externalWindow.onunload = () =>this.props.onClose();}}使成為() {返回 ReactDOM.createPortal(this.props.children, this.containerEl);}}electron-main.js 或者你的主電子文件被命名
<代碼>...函數創建窗口(){主窗口 = 新瀏覽器窗口({...//你需要激活 `nativeWindowOpen`webPreferences: { nativeWindowOpen: true },});...mainWindow.webContents.on('新窗口',(事件、url、frameName、disposition、options、additionalFeatures)=>{//這是我們為窗口選擇的名稱.你可以有多個名字//多個窗口，每個窗口都有自己的選項if (frameName === 'NewWindowComponent') {event.preventDefault();Object.assign(選項，{//這將阻止與主窗口的交互父:主窗口，寬度:300，身高:300，//你也可以設置 `left` 和 `top` 的位置});event.newGuest = new BrowserWindow(options);}});...}...Say I am building a desktop application with react/redux & electron. So my index.html file in electron looks like this:
<!DOCTYPE html>
<html>
...
<body>
<div id="content"></div>
<script src="public/js/bundle.js"></script>
</body>
</html>
My biggest React container (call it app.js) is loaded into the 'id=content' div. This works fine so far, but now I am wondering how to open a new file dialog window (or any new window for that matter) when the user clicks a button in my react application.
I found some examples here & here, but both examples only explain how to load the file dialog window from the main electron processes (in renderer or main).
However, I want the user to engage with my React Application and then, once he or she clicks a button, my app should then tell electron to spawn a new window, and this new window should, of course, somehow be part of my react application.
I would really appreciate it if someone could provide a minimal example here, on how these to things work together.
解決方案 To open a react component in a new window on button click and detect when the window is closed because the component will not simply call componentWillUnmount when you close the window Your app should look like this
App.js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
// To keep track of the new window if opened or closed
isNewWindow: false,
};
}
render() {
return(
// onClose will be fired when the new window is closed
// everything inside NewWindowComponent is considered props.children and will be
// displayed in a new window
{(this.state.isNewWindow) &&
<NewWindowComponent
onClose={() => this.setState({ isNewWindow: false })>
<h2>This will display in a new window</h2>
</NewWindowComponent> }
<button
onClick={() => this.setState({ isNewWindow: true })}>
Open in new window</button>
)
}
}
NewWindowComponent.js
export default class NewWindowComponent extends Component {
// Create a container <div> for the window
private containerEl = document.createElement('div');
// This will keep a reference of the window
private externalWindow = null;
// When the component mounts, Open a new window
componentDidMount() {
// The second argument in window.open is optional and can be set to whichever
// value you want. You will notice the use of this value when we modify the main
// electron.js file
this.externalWindow = window.open('', 'NewWindowComponent ');
// Append the container div and register the event that will get fired when the
// window is closed
if (this.externalWindow)
{
this.externalWindow.document.body.appendChild(this.containerEl);
this.externalWindow.onunload = () => this.props.onClose();
}
}
render() {
return ReactDOM.createPortal(this.props.children, this.containerEl);
}
}
electron-main.js or however your main electron file is named
...
function createWindow() {
mainWindow = new BrowserWindow({
...
// You need to activate `nativeWindowOpen`
webPreferences: { nativeWindowOpen: true },
});
...
mainWindow.webContents.on('new-window',
(event, url, frameName, disposition, options, additionalFeatures) =>
{
// This is the name we chose for our window. You can have multiple names for
// multiple windows and each have their options
if (frameName === 'NewWindowComponent ') {
event.preventDefault();
Object.assign(options, {
// This will prevent interactions with the mainWindow
parent: mainWindow,
width: 300,
height: 300,
// You can also set `left` and `top` positions
});
event.newGuest = new BrowserWindow(options);
}
});
...
}
...
這篇關于最小示例:從反應應用程序中打開電子窗口?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！