問題描述
假設(shè)我正在使用 react/redux & 構(gòu)建一個(gè)桌面應(yīng)用程序.電子.所以我在電子中的 index.html 文件看起來像這樣:
<!DOCTYPE html><html>...<身體><div id="content"></div><script src="public/js/bundle.js"></script></身體></html>我最大的 React 容器(稱為 app.js)被加載到 'id=content' div 中.到目前為止這工作正常，但現(xiàn)在我想知道當(dāng)用戶單擊我的反應(yīng)應(yīng)用程序中的按鈕時(shí)如何打開一個(gè)新的文件對(duì)話框窗口(或任何新窗口).
我發(fā)現(xiàn)了一些例子here &這里，但是這兩個(gè)示例都只說明了如何從主電子進(jìn)程(在渲染器或主進(jìn)程中)加載文件對(duì)話框窗口.
但是，我希望用戶與我的 React 應(yīng)用程序互動(dòng)，然后，一旦他或她點(diǎn)擊一個(gè)按鈕，我的應(yīng)用程序應(yīng)該告訴電子產(chǎn)生一個(gè)新窗口，這個(gè)新窗口當(dāng)然應(yīng)該以某種方式成為一部分我的反應(yīng)應(yīng)用程序.
如果有人能在這里提供一個(gè)最小的例子，說明這些如何協(xié)同工作，我將不勝感激.
點(diǎn)擊按鈕在新窗口中打開 React 組件并檢測(cè)窗口何時(shí)關(guān)閉 因?yàn)榻M件不會(huì)簡(jiǎn)單地調(diào)用 componentWillUnmount 當(dāng)你關(guān)閉窗口時(shí) 你的應(yīng)用應(yīng)該是這樣的
App.js
導(dǎo)出默認(rèn)類 App 擴(kuò)展 React.Component {構(gòu)造函數(shù)(道具){超級(jí)(道具)；這個(gè).state = {//跟蹤新窗口是否打開或關(guān)閉isNewWindow:假，};}使成為() {返回(//onClose 將在新窗口關(guān)閉時(shí)觸發(fā)//NewWindowComponent 中的所有內(nèi)容都被認(rèn)為是 props.children 并且將是//在新窗口中顯示{(this.state.isNewWindow) &&<新窗口組件onClose={() =>this.setState({ isNewWindow: false })><h2>這將顯示在一個(gè)新窗口中</h2></新窗口組件>}<按鈕onClick={() =>this.setState({ isNewWindow: true })}>在新窗口中打開</按鈕>)}}NewWindowComponent.js
導(dǎo)出默認(rèn)類 NewWindowComponent extends Component {//創(chuàng)建一個(gè)容器 對(duì)于窗戶private containerEl = document.createElement('div');//這將保留窗口的引用私人外部窗口=空；//當(dāng)組件掛載時(shí)，打開一個(gè)新窗口組件DidMount() {//window.open 中的第二個(gè)參數(shù)是可選的，可以設(shè)置為任意一個(gè)//你想要的值.當(dāng)我們修改 main 時(shí)你會(huì)注意到這個(gè)值的使用//electron.js 文件this.externalWindow = window.open('', 'NewWindowComponent ');//附加容器 div 并注冊(cè)將觸發(fā)的事件//窗口關(guān)閉如果(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 或者你的主電子文件被命名
<代碼>...函數(shù)創(chuàng)建窗口(){主窗口 = 新瀏覽器窗口({...//你需要激活 `nativeWindowOpen`webPreferences: { nativeWindowOpen: true },});...mainWindow.webContents.on('新窗口',(事件、url、frameName、disposition、options、additionalFeatures)=>{//這是我們?yōu)榇翱谶x擇的名稱.你可以有多個(gè)名字//多個(gè)窗口，每個(gè)窗口都有自己的選項(xiàng)if (frameName === 'NewWindowComponent') {event.preventDefault();Object.assign(選項(xiàng)，{//這將阻止與主窗口的交互父:主窗口，寬度:300，身高:300，//你也可以設(shè)置 `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);
}
});
...
}
...
這篇關(guān)于最小示例:從反應(yīng)應(yīng)用程序中打開電子窗口?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！