Electron应用集成React遇空白页及语法错误问题求助

页面空白无报错的核心原因 #

• 原生Electron不支持直接解析JSX：你把脚本类型改成text/babel没用，因为Electron的Chromium内核没内置Babel编译器，浏览器端要编译JSX必须额外引入babel-standalone，光改类型标签不解决问题。
• React组件没挂载到DOM：如果renderer.jsx里没写挂载逻辑（比如React 18的createRoot或者旧版的ReactDOM.render），就算组件写得再对，也不会渲染到页面上。
• 脚本加载顺序错了：要是React/ReactDOM的CDN在renderer.jsx之后加载，执行renderer的时候React对象还没定义，组件根本跑不起来——别光看没报错，按Ctrl+Shift+I开DevTools仔细看Console，大概率有隐藏错误。

多标签报Uncaught SyntaxError: Unexpected token <的原因 #

JSX有硬性规则：组件返回的JSX必须有单个根元素，不能直接返回多个同级标签。比如你这么写就会报错：

function App() {
  return (
    <h1>Hello</h1>
    <p>World</p>
  )
}

因为原生JS不认识这种写法，必须用根元素包裹，两种常用方式：

// 用div包裹（会生成额外DOM节点）
function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  )
}

// 用Fragment短语法（无额外DOM节点）
function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  )
}

快速修复步骤 #

1. 补全Babel编译依赖：在index.html里按顺序引入CDN，放在renderer.jsx之前：

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./renderer.jsx"></script>

2. 给组件加挂载逻辑：在renderer.jsx里添加代码，把App挂载到页面的根节点（比如你的index.html里要有id="root"的div）：

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello Electron + React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

3. 多标签必须用根元素包裹：按上面的例子修改App组件的返回值。
4. 检查package.json：确保main字段指向main.js，scripts里的start命令是"start": "electron ."。
5. 必开DevTools排查：启动Electron后按Ctrl+Shift+I，看Console和Elements面板，能揪出很多表面看不到的错误。

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