如何在React组件中判断Electron子窗口的打开/关闭状态

你现有代码无法生效的核心原因是：Electron主进程和渲染进程是完全隔离的运行环境，myComponent.tsx属于渲染进程代码，根本访问不到主进程electron.js里定义的childwindow实例，自然也没法直接判断它的状态。正确实现方式是通过IPC通信做状态同步，具体步骤如下：

1. 主进程维护子窗口状态、暴露IPC接口 #

主进程是唯一能直接操作BrowserWindow实例的环境，你需要在这里维护子窗口的开闭状态，同时响应渲染进程的查询请求，也可以主动推送状态变更避免轮询。

// electron.js 主进程代码
const { ipcMain, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow = null;
let childWindow = null;
// 维护子窗口开闭状态标记
let isChildWindowOpen = false;

// 主窗口初始化逻辑（你原有逻辑基础上补preload配置）
function createMainWindow() {
  mainWindow = new BrowserWindow({
    // 你原有主窗口配置...
    webPreferences: {
      // 配置preload脚本，用于安全暴露IPC方法给渲染进程
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false // 保持默认安全配置，不要开启
    }
  });
  // 主窗口加载页面逻辑...
}

// 子窗口创建逻辑（修改你原有代码）
function createChildWindow() {
  childWindow = new BrowserWindow({ 
    parent: mainWindow,
    frame: false,
    transparent: true,
    resizable: false,
    // 其余原有配置...
  });
  isChildWindowOpen = true;
  // 子窗口加载完成后主动通知主窗口状态更新
  childWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('child-window-status-changed', true);
  });
  // 监听子窗口关闭事件，更新状态并通知渲染进程
  childWindow.on('closed', () => {
    childWindow = null;
    isChildWindowOpen = false;
    mainWindow.webContents.send('child-window-status-changed', false);
  });
}

// 注册IPC处理函数，响应渲染进程的状态查询请求
ipcMain.handle('get-child-window-status', () => {
  // 主进程内判断窗口关闭也可以用 childWindow?.isDestroyed() 方法，自己维护标记性能更好
  return isChildWindowOpen;
});

2. 配置preload脚本安全暴露IPC方法 #

因为开启了上下文隔离（Electron默认安全要求），渲染进程不能直接访问ipcRenderer，需要通过preload桥接需要的方法：

// preload.js 和主进程同目录即可
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 主动查询子窗口状态
  getChildWindowStatus: () => ipcRenderer.invoke('get-child-window-status'),
  // 监听子窗口状态变更推送
  onChildWindowStatusChange: (callback) => {
    ipcRenderer.on('child-window-status-changed', (_event, status) => callback(status));
  }
});

3. 渲染进程（myComponent.tsx）获取状态 #

在组件里既可以主动调用方法查询状态，也可以监听主进程的实时推送，不需要轮询：

// myComponent.tsx
import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [isChildOpen, setIsChildOpen] = useState<boolean>(false);

  const getChildStatus = async () => {
    const status = await window.electronAPI.getChildWindowStatus();
    setIsChildOpen(status);
    if (!status) {
      // 这里写子窗口关闭后需要执行的逻辑
    }
  };

  useEffect(() => {
    // 组件挂载时拉取初始状态
    getChildStatus();
    // 注册状态监听，子窗口开关时实时更新
    const removeListener = window.electronAPI.onChildWindowStatusChange((status) => {
      setIsChildOpen(status);
    });
    // 组件卸载时移除监听避免内存泄漏
    return () => removeListener();
  }, []);

  return (
    <>
      <span>子窗口状态：{isChildOpen ? '打开中' : '已关闭'}</span>
      {/* 其余组件内容 */}
    </>
  )
}

注意事项 #

• 不要使用@electron/remote模块在渲染进程直接获取BrowserWindow实例判断状态，存在安全隐患，官方也不推荐跨进程直接访问原生对象的写法。
• 主进程内判断窗口是否销毁的原生方法是win.isDestroyed()，不存在可以直接对比的closed全局值，你之前写的childwindow === closed属于未定义变量对比，永远不会生效。
• 如果不需要实时感知状态变化，完全可以在需要判断的时机直接调用getChildStatus()即可，不用强制加状态监听。

内容的提问来源于stack exchange，提问作者Pedro Toscano