React-Electron自定义窗口头部无法调用窗口控制API求助

问题本质 #

app是Electron主进程专属模块，渲染进程（React代码运行环境）无法直接访问。旧版的remote模块已被官方废弃，即便开启enableRemoteModule: true，在新版本Electron中也可能失效，且存在安全风险。

方案1：IPC通信 + Preload脚本（官方推荐，安全合规） #

这是Electron现代版本的标准做法，通过预加载脚本暴露安全的API接口，避免直接开启node集成带来的风险。

1. 创建preload.js脚本
   在项目根目录新建preload.js，用于向渲染进程暴露安全的IPC通信方法：

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程全局对象暴露API
contextBridge.exposeInMainWorld('electronAPI', {
  quitApp: () => ipcRenderer.send('quit-app')
});

2. 修改主进程main.js
   引入ipcMain并监听渲染进程的退出请求，同时配置preload脚本路径：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 675,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 指定preload脚本路径
      contextIsolation: true, // 默认开启，保持开启以保障安全
      nodeIntegration: false // 无需开启node集成
    }
  });

  mainWindow.loadURL('http://localhost:3000');

  // 监听渲染进程发送的退出事件
  ipcMain.on('quit-app', () => {
    app.quit();
  });
}

app.whenReady().then(createWindow);

// 补充Electron窗口生命周期代码
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

3. React组件中调用退出方法
   直接通过全局对象调用暴露的API：

<div onClick={() => {
  window.electronAPI.quitApp();
}}>关闭应用</div>

方案2：使用remote模块（不推荐，仅兼容旧版本） #

如果你的Electron版本低于14，且需要快速兼容旧代码，可以使用此方法，但注意remote模块已被废弃，未来版本会移除：

1. 修改main.js的webPreferences配置

const mainWindow = new BrowserWindow({
  width: 900,
  height: 675,
  frame: false,
  webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    contextIsolation: false // 必须关闭，否则渲染进程无法访问remote
  }
});

2. React组件中调用remote.app.quit()

const { remote } = require('electron');

<div onClick={() => {
  remote.app.quit();
}}>关闭应用</div>

内容的提问来源于stack exchange，提问作者mohammad javad kohan kan