Electron结合React时ContextBridge无法调用主进程函数求助

你的核心问题是主进程配置与ContextBridge的工作机制冲突，导致暴露的函数无法正常执行。以下是具体修复步骤和原理说明：

1. 修正主进程配置（webPreferences） #

你当前开启了contextIsolation: false，这直接破坏了ContextBridge的安全隔离机制——ContextBridge必须在上下文隔离开启的环境下才能正常工作。同时nodeIntegration: true属于不安全配置，Electron官方已不推荐使用。

修改后的主进程代码：

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

function createWindow() {
  const startUrl =
    process.env.ELECTRON_START_URL ||
    url.format({
      pathname: path.join(__dirname, "../index.html"),
      protocol: "file:",
      slashes: true,
    });
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 关闭Node.js集成，遵循安全规范
      contextIsolation: true, // 必须开启才能让ContextBridge生效
      preload: path.join(__dirname, "./preload.js"),
    },
  });
  win.loadURL(startUrl);
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

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

2. 修正Preload脚本 #

你直接给window.ipcRenderer赋值的操作在上下文隔离开启后会失效，且违反安全规范。如果不需要IPC通信，可完全移除该行；若需要，需通过ContextBridge暴露指定方法。

修改后的preload.js：

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

contextBridge.exposeInMainWorld("electron", {
  homedir: () => os.homedir(),
  osversion: () => os.version(),
  arch: () => os.arch(),
  // 如需IPC通信，可在此暴露安全的方法，示例：
  // send: (channel, data) => ipcRenderer.send(channel, data),
  // receive: (channel, callback) => ipcRenderer.on(channel, (_, data) => callback(data))
});

// 移除此行：window.ipcRenderer = ipcRenderer;

3. 优化React组件逻辑 #

React组件初始化时，Preload脚本可能尚未完成注入，直接访问window.electron可能导致报错。使用useEffect确保在组件挂载后再获取系统信息：

修改后的React组件代码：

import React, { useState, useEffect } from "react";
import { Link, Outlet } from "react-router-dom";

const Main = () => {
  const [systemInfo, setSystemInfo] = useState({
    homedir: "",
    osversion: "",
    arch: ""
  });

  useEffect(() => {
    if (window.electron) {
      const { homedir, osversion, arch } = window.electron;
      setSystemInfo({
        homedir: homedir(),
        osversion: osversion(),
        arch: arch()
      });
    }
  }, []);

  return (
    <React.Fragment>
      <div>
        <p>We Made it</p>
        <ul>
          <li><Link to="link1">Page 1</Link></li>
          <li><Link to="link2">Page 2</Link></li>
          <li><Link to="link3">Page 3</Link></li>
        </ul>
        <div>
          <h3>System Information</h3>
          <p>
            The home directory is{" "}
            <span style={{ color: "#6645aa" }}>{systemInfo.homedir}</span>
          </p>
          <p>
            The OS version is{" "}
            <span style={{ color: "#6645aa" }}>{systemInfo.osversion}</span>
          </p>
          <p>
            The System architecture is{" "}
            <span style={{ color: "#6645aa" }}>{systemInfo.arch}</span>
          </p>
        </div>
      </div>
      <Outlet />
    </React.Fragment>
  );
};

export default Main;

关键原理说明 #

• ContextBridge的作用：在开启上下文隔离的前提下，安全地将主进程/Preload中的API注入到渲染进程的window对象，避免渲染进程直接访问Node.js API带来的安全风险。
• 上下文隔离（contextIsolation）：开启后，渲染进程和Preload脚本运行在不同的上下文环境，Preload脚本是唯一能同时访问Node.js API和渲染进程window的桥梁。

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