Electron React应用中Component.js的TitleBar组件无法渲染问题

问题根因与修复方案 #

1. 组件导出语法错误 #

你在Component.js中同时声明了两个export default，不符合ES模块规范：单个JS模块仅允许存在一个默认导出，后续定义的NavBar组件会覆盖前面的TitleBar组件，你在index.js中导入的TitleBar实际上是被覆盖后的NavBar，部分打包工具还会直接静默忽略重复默认导出的内容，导致组件导出为空。
修复方案：
将默认导出改为命名导出，修改Component.js代码：

import React, { Component } from "react";

export class TitleBar extends React.Component {
    render() {
        return(
            <div id="TitleBar">
                <button id="minButton">_</button>
                <button id="maxButton">[]</button>
                <button id="exitButton">X</button>
            </div>
        );
    }
}

export class NavBar extends React.Component {
    render() {
        return(
            <div id="NavBar">
                <button id="homeButton">Home</button>
            </div>
        );
    }
}

同步修改index.js的导入语句为命名导入：

import { TitleBar } from "./Components.js";

2. Babel解析配置缺失 #

你在index.html中给script标签加了type="text/babel"属性，该属性需要引入@babel/standalone库才能被浏览器识别、解析JSX语法，如果没有引入这个依赖，浏览器会直接忽略该脚本的执行，这就是控制台无任何报错、也没有渲染内容的核心原因。
修复方案二选一：

• 方案A：直接在浏览器侧解析JSX，在index.html的head标签内加入babel依赖引入：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

• 方案B（更推荐）：使用webpack/vite等打包工具提前编译JSX代码，把script标签的type改为text/javascript，直接引入编译后的JS文件即可。

3. React版本适配问题 #

如果你使用的是React 18及以上版本，旧的ReactDOM.renderAPI已经被废弃，需要改用createRootAPI渲染组件，修改index.js代码：

import React from "react";
import ReactDOM from "react-dom/client";
import { TitleBar } from "./Components.js";

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

修改完成后重新执行npm start即可正常渲染组件。

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