如何在React.js网页中显示Electron版本？（尝试ipcRender/ipcMain未果）

方法1：使用ContextBridge（Electron官方推荐的安全方式） #

这是最安全的实现方式，仅暴露需要的版本信息，避免将整个Electron API暴露给渲染进程。

1.1 配置主进程的BrowserWindow #

确保主进程中为窗口指定preload脚本，同时保持安全配置：

// main.js 主进程代码
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 用绝对路径指定preload脚本位置
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 开启上下文隔离（Electron 12+默认开启）
      nodeIntegration: false // 关闭Node集成，提升安全性
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // 加载你的React开发服务地址
}

app.whenReady().then(createWindow);

1.2 编写Preload脚本 #

通过contextBridge将版本信息暴露给渲染进程的全局对象：

// preload.js
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getElectronVersion: () => process.versions.electron
});

1.3 在React组件中调用 #

直接访问全局对象获取版本：

// React组件代码
import React, { useState, useEffect } from 'react';

function App() {
  const [electronVersion, setElectronVersion] = useState('');

  useEffect(() => {
    if (window.electronAPI) {
      setElectronVersion(window.electronAPI.getElectronVersion());
    }
  }, []);

  return (
    <div>
      <h1>Electron版本：{electronVersion}</h1>
    </div>
  );
}

export default App;

方法2：通过IPC传递版本（解决你之前的失败问题） #

如果之前使用IPC未成功，大概率是配置或调用方式有误，以下是正确的IPC流程：

2.1 主进程监听IPC请求 #

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');

// 监听渲染进程的版本获取请求
ipcMain.handle('get-electron-version', () => {
  return process.versions.electron;
});

// 窗口创建代码同方法1，确保preload配置正确

2.2 Preload脚本暴露IPC调用方法 #

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getElectronVersion: () => ipcRenderer.invoke('get-electron-version')
});

2.3 React组件异步获取版本 #

由于IPC调用是异步的，需用async/await处理：

// React组件代码
import React, { useState, useEffect } from 'react';

function App() {
  const [electronVersion, setElectronVersion] = useState('');

  useEffect(() => {
    const fetchVersion = async () => {
      if (window.electronAPI) {
        const version = await window.electronAPI.getElectronVersion();
        setElectronVersion(version);
      }
    };
    fetchVersion();
  }, []);

  return (
    <div>
      <h1>Electron版本：{electronVersion}</h1>
    </div>
  );
}

export default App;

常见问题排查（针对你之前IPC失败的情况） #

• 确保preload脚本使用绝对路径，用path.join(__dirname, 'preload.js')避免路径错误
• 确认contextIsolation为true（默认开启），若关闭虽能直接使用ipcRenderer但存在安全风险
• 检查主进程是否正确注册IPC监听事件，异步场景用ipcMain.handle，同步场景用ipcMain.on
• React开发环境下，确保Electron加载的是正确的本地服务地址，避免跨域问题

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