HTML 组件未在电子反应应用程序中呈现答案

【问题标题】：HTML Component not rendering in electron react appHTML 组件未在电子反应应用程序中呈现
【发布时间】：2021-11-11 18:09:36
【问题描述】：

来自 Component.js 的 TitleBar 在我的电子应用程序中没有呈现为 html，我没有收到任何错误，并且已确认文件路径。

Component.js，

import React, { Component } from "react";

export default 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 default class NavBar extends React.Component {
    render() {
        return(
            <div id="NavBar">
                <button id="homeButton">Home</button>
            </div>
        );
    }
}

Index.js，

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

console.log('intro');
ReactDOM.render(<TitleBar />, document.getElementById('app'));

index.html,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DevFlow</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <main id="app"></main>
    <script defer type="text/babel" src="./index.js"></script>
  </body>
</html>

当我运行命令“npm start”时，应用程序出现了，但是标签中没有组件。任何帮助将不胜感激。我还将包括我的 Main.js，尽管我认为没有必要诊断我的问题。谢谢

Main.js，

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

if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
    frame: false
  });

  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  mainWindow.webContents.openDevTools();
};

app.on('ready', createWindow);

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

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

【问题讨论】：

我想我的问题可能在于对 index.js 的引用。当我删除 type="text/babel" 时，出现“导入在模块之外”的错误，这可以通过更改 type="module" 来解决，但随后出现意外的似乎来自 html 的引用无法解释 JSX

标签： javascript html reactjs electron

【解决方案1】：

尝试在 index.html 文件的顶部添加<base href="/">。

【讨论】：

添加了，并将 src="./index.js" 更改为 src="index.js"。仍然没有渲染。
@KyleBatchelor 仅更改答案中提到的基本 href 。不要使用 ./

【解决方案2】：

解决了我的问题：

浏览器解释器无法读取 index.js 文件，因为它需要编译成 vanilla JS。

我将尝试用 webpack 做的事情

【讨论】：

我有一个使用 React 的模板，如果你想知道如何配置 webpack，可以从它开始：github.com/reZach/secure-electron-template

【解决方案3】：

也许你需要添加 babel 浏览器脚本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DevFlow</title>
    <link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  </head>
  <body>
    <main id="app"></main>
    <script defer type="text/babel" src="./index.js" data-type="module"></script>
  </body>
</html>

【讨论】：