如何在Electron应用中打开React组件（JSX）作为新窗口？

核心问题分析 #

你的代码存在两个关键问题：

1. IPC事件名称不匹配：渲染进程发送的是open-my-component，但主进程监听的是openImageModal，导致主进程无法响应事件。
2. 直接加载JSX文件无效：Electron的BrowserWindow.loadFile()只能加载编译后的HTML/JS文件，无法直接解析JSX语法。

分步解决方案 #

1. 统一IPC事件名称 #

修改主进程与渲染进程的事件名，确保两者一致：

// Component1.jsx（渲染进程）
const handleOpenImageModal = () => {
    console.log("check");
    ipcRenderer.send("open-my-component"); // 保持事件名统一
};

return (
    <>
        <ExpandArrowsAltIcon
            title={t("Image Inspection")}
            size={18}
            role="button"
            onClick={handleOpenImageModal}
        />
        <Modal>
            <MyComponent />
        </Modal>
    </>
);

// electron.js（主进程）
const path = require('path');

function initApp() {
    // 监听统一的事件名
    ipcMain.on("open-my-component", (event) => {
        const myWindow = new BrowserWindow({ width: 600, height: 400 });
        
        // 根据环境加载对应资源
        const isDev = process.env.NODE_ENV === 'development';
        if (isDev) {
            // 开发环境加载Vite/React Dev Server的地址（需对应新入口路径）
            myWindow.loadURL('http://localhost:5173/my-component-window.html');
        } else {
            // 生产环境加载打包后的HTML文件（路径根据实际打包结构调整）
            myWindow.loadFile(path.join(__dirname, '../dist/my-component-window.html'));
        }

        // 可选：打开开发者工具调试
        myWindow.webContents.openDevTools();
    });
}

2. 为新窗口准备独立的React入口与HTML #

创建新的React入口文件

新建my-component-window.jsx，专门用于渲染MyComponent：

// my-component-window.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './path/to/MyComponent'; // 替换为你的组件路径

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <MyComponent />
    </React.StrictMode>
);

创建对应的HTML文件

新建my-component-window.html，作为新窗口的载体：

<!-- my-component-window.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Inspection</title>
</head>
<body>
    <div id="root"></div>
    <!-- 打包后会自动注入JS文件，开发环境由构建工具处理 -->
</body>
</html>

3. 配置打包工具支持多入口 #

以Vite为例，修改vite.config.js添加多入口配置，确保新窗口的资源被正确打包：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
    plugins: [react()],
    build: {
        rollupOptions: {
            input: {
                main: path.resolve(__dirname, 'index.html'), // 原主入口
                myComponentWindow: path.resolve(__dirname, 'my-component-window.html'), // 新窗口入口
            },
        },
    },
});

关键注意事项 #

• 开发环境下，确保新窗口的HTML文件能被Dev Server正确访问，路径需与配置一致。
• 生产环境打包后，需根据实际输出目录调整主进程中loadFile()的路径。
• 如果使用Webpack，需对应配置多入口entry，确保新窗口的JS文件被单独编译。

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