Electron应用中React无法渲染，无报错但内容不显示求助

嘿，我帮你捋捋这个问题！你碰到的情况其实很典型——Electron的Chromium内核默认不认识JSX语法，也没自带Babel转译工具，所以你的代码看似没问题，但实际上根本没被正确解析执行，自然就看不到内容，也不会报错（因为浏览器没识别出这是需要处理的JS代码）。

问题根源拆解 #

• 你用了<script type="text/babel">，但Electron没有内置Babel转译器，Chromium只会把这段代码当成普通文本忽略掉，不会执行里面的JSX逻辑。
• 另外，React 18之后已经废弃了ReactDOM.renderAPI，就算转译成功，旧写法也可能导致渲染异常。

快速解决方案（适合测试） #

直接通过CDN引入React、ReactDOM和Babel Standalone，让浏览器端实时转译JSX：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入React和ReactDOM开发版CDN -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入Babel Standalone用于客户端转译JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // 使用React 18的新API创建根节点并渲染
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<h1>Hello World</h1>);
  </script>
</body>
</html>

⚠️ 注意：这种方式只适合快速验证，生产环境千万别用——客户端转译会拖慢加载速度，而且开发版库体积很大。

生产环境推荐方案（用构建工具） #

正经开发Electron+React应用，建议用Vite或Create React App这类构建工具提前把JSX转成原生JS，再交给Electron加载。这里以Vite为例：

1. 初始化Vite+React项目

npm create vite@my-electron-react -- --template react
cd my-electron-react
npm install

2. 安装Electron相关依赖

npm install electron electron-builder --save-dev
npm install concurrently --save-dev # 用来同时运行Vite和Electron

3. 创建Electron主进程文件main.js

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false, // 简化配置，生产环境建议用预加载脚本替代
      nodeIntegration: true,
    },
  });

  // 开发环境加载Vite的本地服务，生产环境加载打包后的静态文件
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173');
    mainWindow.webContents.openDevTools(); // 打开调试工具方便排查
  } else {
    mainWindow.loadFile(path.join(__dirname, 'dist/index.html'));
  }
}

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

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

4. 修改package.json配置脚本

{
  "name": "my-electron-react",
  "version": "0.0.0",
  "main": "main.js", // 指定Electron主文件
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\"",
    "build": "vite build && electron-builder"
  },
  // 添加electron-builder的打包配置
  "build": {
    "appId": "com.yourname.electronreact",
    "directories": {
      "output": "dist-electron"
    }
  }
}

5. 启动项目

npm run dev

这下你就能看到正常渲染的"Hello World"了！

额外注意点 #

• 如果你坚持用require('react')，一定要先通过npm install react react-dom安装本地依赖，确保Electron能找到这些模块。
• 生产环境建议开启contextIsolation并使用预加载脚本（preload）来安全地在主进程和渲染进程间通信，避免直接开启nodeIntegration带来的安全风险。

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