[英]Electron and React; detecting electron api changes in react with electron remote
I am trying to change the style of a div tag dynamically when the electron window is maximized.当 electron window 最大化时,我试图动态更改 div 标签的样式。 In the code below I want the div class=resizer to display: none when the electron window is maximized.
在下面的代码中,我希望 div class=resizer 在 electron window 最大化时显示:none。
In the electron api there is a.isMaximized() function call on the window variable.在 electron api 中有 a.isMaximized() function 调用 Z05B8C34CBD96FFBF2DEZ4C1 变量。 I am requiring the electron remote with: const remote = window.require('electron').remote.
我需要 electron 遥控器:const remote = window.require('electron').remote。 Then I remote.getCurrentWindow().
然后我 remote.getCurrentWindow()。
The issue is I can't thing of a way to trigger a way to listen if the window is maximized?问题是如果 window 最大化,我无法触发监听方式? I could use like a useEffect() react hook that checks window.isMaximized() every 1 seconds or so, but doesn't seem very optimized and a waste of resources.
我可以使用 useEffect() 反应钩子,每 1 秒左右检查一次 window.isMaximized() ,但似乎不是很优化并且浪费资源。
Is there a better way to check this?有没有更好的方法来检查这个? I need a way to 'watch' for when the window becomes maximized.
我需要一种方法来“观察”window 何时最大化。
const remote = window.require('electron').remote
const TitlebarDev = () => {
const window = remote.getCurrentWindow()
return (
<div className="TitlebarDev">
<div className="Title-BarDev">
<div className="TitlebarDev-drag-region"></div>
<div className="Title-BarDev__section-icon">
</div>
<div className="Title-BarDev__section-menubar">
</div>
<div className="Title-BarDev__section-center">
</div>
<div className="Title-BarDev__section-windows-control">
</div>
<div
// Here is the div I need to change when the window is maximized; I just have a placeholder ternary function on it for concept.
style={true ? { display: 'none' } : {}}
className="resizer">
</div>
</div>
</div >
)
}
export default TitlebarDev
I solved this after some time studying.经过一段时间的学习,我解决了这个问题。 The issue was solved using electrons built-in event listeners on the BrowserWindow (win.) object.
该问题已使用 BrowserWindow(win)object 上的电子内置事件侦听器解决。
Below in the code;在代码下面; the remote is imported with window.require('electron').remote.
遥控器使用 window.require('electron').remote 导入。 Then I save the CurrentWindow() object in a variable called 'window'.
然后我将 CurrentWindow() object 保存在一个名为“window”的变量中。 On that window variable you can call the.on method which can take the predefined event listeners built into electron.
在 window 变量上,您可以调用 .on 方法,该方法可以采用 electron 中内置的预定义事件侦听器。 Using window.on('maximize', () => {}) / which is the 'maximize' event listener/ the callback function is ran whenever the window is maximized.
使用 window.on('maximize', () => {}) / 这是 'maximize' 事件侦听器/每当 window 最大化时都会运行回调 function。 On Electrons official API docs under BrowserWindow, there is a full list of event listeners.
在 BrowserWindow 下的 Electrons 官方 API 文档中,有完整的事件监听器列表。
Hopefully this can help others out in the future!希望这可以在将来帮助其他人!
import React, { useState } from 'react';
const remote = window.require('electron').remote
const TitlebarDev = () => {
// React state
const [isMaximized, setIsMaximized] = useState();
// Electron currentwindow call with remote
const window = remote.getCurrentWindow()
// gets current state if maximized in real time
window.on('maximize', () => {
setIsMaximized(true)
})
// gets current state if unmaximzed in real time
window.on('unmaximize', () => {
setIsMaximized(false)
})
return (
<div className="TitlebarDev">
<div className="Title-BarDev">
<div className="TitlebarDev-drag-region"></div>
<div className="Title-BarDev__section-icon">
</div>
<div className="Title-BarDev__section-menubar">
</div>
<div className="Title-BarDev__section-center">
</div>
<div className="Title-BarDev__section-windows-control">
</div>
<div
style={isMaximized ? { display: 'none' } : {}}
className="resizer">
</div>
</div>
</div >
)
}
export default TitlebarDev
EDIT: if anyone finds this, don't use "remote" anymore,.编辑:如果有人发现这个,不要再使用“远程”了。 Use IPC now.
现在使用 IPC。 as remote is slow and old.
因为远程又慢又旧。 IPC is much much faster and their writing async/await syntax for it.
IPC 要快得多,他们为它编写 async/await 语法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.