如何在Electron中向渲染进程的React组件传递数据？

问题根源 #

直接在React组件中引入electron模块会报错，因为React编译后的代码运行在浏览器环境，而Electron依赖的fs等Node.js模块在浏览器环境中不存在；同时React的打包工具（如Webpack）默认不会识别Electron的内置模块。

解决方案 #

通过Electron的**预加载脚本（preload）**安全地将ipcRenderer的核心能力暴露给渲染进程，避免直接在React代码中引入Electron模块。

步骤1：修改主进程代码，配置预加载脚本 #

更新窗口创建配置，添加预加载脚本路径，同时关闭nodeIntegration提升安全性：

const path = require('path');
const mainWindow = createWindow('main', {
    width: 1920,
    height: 1080,
    minWidth: 1366,
    minHeight: 768,
    webPreferences: {
      nodeIntegration: false, // 关闭Node.js集成，提升安全性
      contextIsolation: true, // 开启上下文隔离，默认启用，显式声明更清晰
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  })

// 原有页面加载逻辑保持不变
if (isProd) {
    await mainWindow.loadURL('app://./home.html')
} else {
    const port = process.argv[2]
    await mainWindow.loadURL(`http://localhost:${port}/home`)
    mainWindow.webContents.openDevTools()
}

mainWindow.webContents.on('did-finish-load', () => {
   mainWindow.webContents.send('submitted-form', "hello")
})

步骤2：编写预加载脚本（preload.js） #

在主进程同级目录创建preload.js，通过contextBridge将消息监听方法安全暴露到全局：

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

// 向渲染进程暴露可控的API
contextBridge.exposeInMainWorld('electronAPI', {
  onSubmittedForm: (callback) => {
    ipcRenderer.on('submitted-form', callback);
    // 返回清理函数，防止组件卸载后内存泄漏
    return () => ipcRenderer.removeListener('submitted-form', callback);
  }
});

步骤3：修改React组件代码（app.tsx） #

不再直接引入electron，使用预加载脚本暴露的全局API：

// 声明全局类型，避免TypeScript类型报错
declare global {
  interface Window {
    electronAPI: {
      onSubmittedForm: (callback: (event: Electron.IpcRendererEvent, data: string) => void) => () => void;
    };
  }
}

class _app extends React.Component<any, any> {
  cleanup?: () => void;

  constructor(props: any) {
    super(props);
  }

  componentDidMount() {
    // 监听主进程发送的消息
    this.cleanup = window.electronAPI.onSubmittedForm((event, data) => {
      console.log("received data", data);
    });
  }

  componentWillUnmount() {
    // 组件卸载时清理监听，避免内存泄漏
    if (this.cleanup) {
      this.cleanup();
    }
  }
}

额外说明 #

• 关闭nodeIntegration是Electron官方推荐的安全实践，避免渲染进程直接访问Node.js模块带来的风险。
• 使用contextBridge可以确保渲染进程只能通过我们暴露的接口与主进程交互，防止恶意代码调用Electron内部API。

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