Electron+React中如何实现App.jsx与Main.js的变量传递？

1. 保留Preload的IPC桥接逻辑 #

Preload脚本依然负责暴露安全的IPC接口给渲染进程，和你之前单独用Electron时的逻辑一致，只是后续由React组件调用这个接口，而非DOM操作后调用。

示例preload.js：

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 定义传递输入值的方法，用invoke支持双向通信（可选返回值）
  sendInputToMain: (value) => ipcRenderer.invoke('pass-input-value', value)
});

2. React组件用状态管理替代DOM操作 #

在App.jsx里，用React的useState管理输入框的值，在值变化或触发提交时，直接调用Preload暴露的API传递数据，完全不需要操作DOM。

示例App.jsx：

import { useState } from 'react';

function App() {
  const [inputVal, setInputVal] = useState('');

  // 输入实时传递（可选）
  const handleInputChange = (e) => {
    const val = e.target.value;
    setInputVal(val);
    window.electronAPI.sendInputToMain(val);
  };

  // 点击按钮提交传递
  const handleSubmit = () => {
    window.electronAPI.sendInputToMain(inputVal);
  };

  return (
    <div>
      <input
        type="text"
        value={inputVal}
        onChange={handleInputChange}
        placeholder="输入内容"
      />
      <button onClick={handleSubmit}>提交到Main进程</button>
    </div>
  );
}

export default App;

3. Main进程监听IPC事件 #

在Main.js中，通过ipcMain.handle（对应渲染进程的invoke）接收传递过来的值，处理业务逻辑。

示例Main.js：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 必须开启，保证contextBridge正常工作
      nodeIntegration: false
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // React开发环境地址，打包后替换为loadFile
}

app.whenReady().then(() => {
  // 监听渲染进程传递的输入值
  ipcMain.handle('pass-input-value', (event, value) => {
    console.log('从React组件收到的值:', value);
    // 这里可以执行文件写入、系统API调用等逻辑
    return '值已成功接收'; // 可选：返回响应给渲染进程
  });

  createWindow();

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

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

核心注意事项 #

• 不要在React中使用document.getElementById，React是状态驱动UI的框架，直接操作DOM违背其设计原则，还容易引发状态不一致的bug。
• 必须开启contextIsolation，这是Electron的安全最佳实践，contextBridge依赖该配置才能正常工作。
• 根据需求选择IPC方式：invoke/handle适用于需要双向通信（需要返回值）的场景，send/on适用于单向通信场景。

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