HTML 组件未在电子反应应用程序中呈现
Posted
技术标签:
【中文标题】HTML 组件未在电子反应应用程序中呈现【英文标题】：HTML Component not rendering in electron react app 【发布时间】：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 【参考方案1】：尝试在 index.html 文件的顶部添加<base href="/">。
【讨论】：
添加了解决了我的问题：
浏览器解释器无法读取 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>
【讨论】：
以上是关于HTML 组件未在电子反应应用程序中呈现的主要内容，如果未能解决你的问题，请参考以下文章
Django 联系电子邮件表单未在模板 home.html 中呈现/显示