时间戳

首页 > 解决方案 > 电子和反应；检测电子 api 变化与电子遥控器反应

javascript - 电子和反应；检测电子 api 变化与电子遥控器反应

问题描述

当电子窗口最大化时，我正在尝试动态更改 div 标签的样式。在下面的代码中，我希望 div class=resizer 在电子窗口最大化时显示：none。

在电子 api 中，窗口变量上有一个 .isMaximized() 函数调用。我需要电子遥控器： const remote = window.require('electron').remote。然后我 remote.getCurrentWindow()。

问题是如果窗口最大化，我无法触发监听方式？我可以使用 useEffect() 反应钩子，每 1 秒左右检查一次 window.isMaximized() ，但似乎不是很优化并且浪费资源。

有没有更好的方法来检查这个？我需要一种方法来“观察”窗口何时最大化。

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

标签： javascriptreactjselectron

解决方案

经过一段时间的学习，我解决了这个问题。使用 BrowserWindow (win.) 对象上的电子内置事件侦听器解决了该问题。

在代码下面；遥控器是用 window.require('electron').remote 导入的。然后我将 CurrentWindow() 对象保存在一个名为“window”的变量中。在该窗口变量上，您可以调用 .on 方法，该方法可以将预定义的事件侦听器内置到电子中。使用 window.on('maximize', () => {}) / 这是 'maximize' 事件侦听器/只要窗口最大化，就会运行回调函数。在 BrowserWindow 下的 Electrons 官方 API 文档中，有完整的事件监听器列表。

希望这可以在将来帮助其他人！

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

编辑：如果有人发现这个，不要再使用“远程”了！！现在使用 IPC，因为遥控器既慢又旧。IPC 要快得多，他们为它编写 async/await 语法。

推荐阅读