如何在electron-react-boilerplate中点击按钮调用contents.undo()实现撤销？

要实现点击按钮触发 contents.undo()，核心是通过 Electron 的 IPC（进程间通信）让渲染进程（React 组件）通知主进程执行撤销操作——因为 webContents 是主进程中 BrowserWindow 实例的属性，无法直接在渲染进程调用。

1. 主进程配置 IPC 监听 #

在主进程文件（通常是 main/main.ts）中，找到窗口创建逻辑，添加 IPC 监听器来响应渲染进程的撤销请求：

// main/main.ts
import { ipcMain, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    // 你的窗口配置（如宽高、预加载脚本路径等）
  });

  // 监听渲染进程发来的撤销指令
  ipcMain.on('trigger-undo', () => {
    if (mainWindow?.webContents) {
      mainWindow.webContents.undo();
    }
  });
}

2. 渲染进程添加按钮并触发请求 #

推荐方式：通过预加载脚本暴露 API（符合 Electron 安全规范） #

在预加载脚本（main/preload.ts）中，通过 contextBridge 向渲染进程安全暴露撤销方法：

// main/preload.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  undo: () => ipcRenderer.send('trigger-undo')
});

然后在 React 组件中调用该方法：

// src/renderer/App.tsx
import React from 'react';

function App() {
  const handleUndoClick = () => {
    window.electronAPI.undo();
  };

  return (
    <div className="App">
      <button onClick={handleUndoClick}>撤销</button>
      {/* 你的其他页面内容 */}
    </div>
  );
}

export default App;

备选方式：直接在渲染进程导入 ipcRenderer（不推荐，存在安全风险） #

如果不需要严格遵循安全规范，可直接在 React 组件中导入 ipcRenderer 发送请求：

// src/renderer/App.tsx
import React from 'react';
import { ipcRenderer } from 'electron';

function App() {
  const handleUndoClick = () => {
    ipcRenderer.send('trigger-undo');
  };

  return (
    <div className="App">
      <button onClick={handleUndoClick}>撤销</button>
    </div>
  );
}

export default App;

注意事项 #

• contents.undo() 仅对页面中支持撤销的元素有效（如输入框、富文本编辑器），无可撤销操作时调用不会产生效果。
• 需确保 mainWindow 实例及 webContents 不为空，避免空指针报错。

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