英文:
Adding Close, Minimize, and Maximize buttons to a React-based Electron App
问题
I'm here to help with the translation, as requested. Here's the translated content:
我正在制作一个使用React Typescript作为UI框架的Electron应用程序，但在实现自定义标题栏的最小化、最大化和关闭按钮功能方面遇到了问题。
基本上，我有一个React组件WindowControlButton.tsx，当单击时应该运行一个关闭/最小化/最大化窗口的函数。然而，我还没有能够实现一个函数来桥接Electron和React，以便窗口实际上被关闭。
在Electron的main.js文件中，我有以下内容：
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
}
以及在preload.js中：
contextBridge.exposeInMainWorld('windowControlAPI', {
minimizeApp: () => { ipcRenderer.send('minimize') },
maximizeApp: () => { ipcRenderer.send('maximize') },
closeApp: () => { ipcRenderer.send('close') }
});
然后，在main.js中：
ipcMain.on('close', () => { win.close() });
ipcMain.on('minimize', () => { win.minimize() });
ipcMain.on('maximize', () => {
if (win.isMaximized()) win.unmaximize()
else win.maximize()
});
最后，在WindowControlButton.tsx中，我有：
declare global {
interface Window {
windowControlAPI: {
minimizeApp: () => void,
maximizeApp: () => void,
closeApp: () => void
};
}
}
// 这些只是为了展示我如何尝试使用上面定义的函数
const closeApp = () => { window.windowControlAPI.closeApp() }
const minimizeApp = () => { window.windowControlAPI.minimizeApp() }
const maximizeApp = () => { window.windowControlAPI.maximizeApp() }
注意：如果没有declare global块，TypeScript会抛出错误，说windowControlAPI不存在。当前项目编译和显示正常，但点击按钮会抛出Cannot read properties of undefined (reading 'closeApp')的错误（我猜测它找不到window.windowControlAPI上的closeApp()函数）。有人可以建议一种更好的方法来做这个（我尝试了很多不同的解决方案，所以现在可能看起来像一堆东西混在一起）或者为什么我的React组件似乎无法连接到Electron源吗？
谢谢 
英文:
I'm making an electron app with React Typescript for the UI framework and I'm having trouble implementing functionality for the minimize, maximize, and close buttons for a custom title bar.
Basically, I have a React component WindowControlButton.tsx which should run a function to close/min/max the window when clicked. I haven't been able to implement a function that bridges electron and react so that the window is actually closed, though.
In electron's main.js file I have the following:
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
}
And in preload.js:
contextBridge.exposeInMainWorld('windowControlAPI', {
minimizeApp: () => { ipcRenderer.send('minimize') },
maximizeApp: () => { ipcRenderer.send('maximize') },
closeApp: () => { ipcRenderer.send('close') }
});
Then, back in main.js:
ipcMain.on('close', () => { win.close() });
ipcMain.on('minimize', () => { win.minimize() });
ipcMain.on('maximize', () => {
if (win.isMaximized()) win.unmaximize()
else win.maximize()
});
Finally, in WindowControlButton.tsx I have:
declare global {
interface Window {
windowControlAPI: {
minimizeApp: () => void,
maximizeApp: () => void,
closeApp: () => void
};
}
}
// These are kind of just to show how I'm trying to use the functions I've defined above
const closeApp = () => { window.windowControlAPI.closeApp() }
const minimizeApp = () => { window.windowControlAPI.minimizeApp() }
const maximizeApp = () => { window.windowControlAPI.maximizeApp() }
Note: Without the declare global block Typescript throws an error saying windowControlAPI does not exist. Currently, the project compiles and displays fine, but clicking the buttons throws Cannot read properties of undefined (reading 'closeApp') (I'm guessing it can't find closeApp() on window.windowControlAPI.
Can anyone suggest either a better way to do this (I've tried a lot of different solutions so it might look like a ton of stuff mashed together right now) or why my React component can't seem to connect to the electron source?
Thanks
答案1
得分: 0
无法读取未定义的属性（读取'closeApp'）
意味着window.windowControlAPI未定义。
您的preload文件真的已加载吗？
例如：
您是否使用了正确的preload文件路径？
希望这有所帮助！
英文:
Cannot read properties of undefined (reading 'closeApp')
Means window.windowControlAPI is undefined.
Is your preload file really loaded?
Ex.
Do you have the correct path to your preload file?
Hope this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论