我是Electron和React的初学者。我试着用react制作一个电子应用程序，但JSX组件没有被渲染，尽管CSS文件渲染得很好。我使用babel将JSX组件转换为纯javascript，但仍然没有呈现。我不知道问题出在哪里，有人能解释一下我该怎么办吗？
这是我的JSON文件：
{
"dependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"babel-preset-react-app": "^9.1.2",
"bootstrap": "^4.4.1",
"electron-packager": "^14.2.1",
"font-awesome": "^4.7.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"reactstrap": "^8.4.
}
"main": "dist/electron.js"
"scripts": {
"start": "npm run babel && electron .",
"babel": "babel ./src --out-dir ./dist --copy-files"
}
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/node": "^7.8.7",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.1",
"@types/react": "^16.9.25",
"@types/react-dom": "^16.9.5",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1"
}
我的.babelrc是：
{"plugins":
["@babel/plugin-transform-react-jsx-source",
"@babel/plugin-proposal-class-properties"],
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
我的electron.js文件是：
const { app, BrowserWindow } = require("electron");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1500,
height: 800,
icon: "./dist/img/icon.png",
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile("./dist/index.html");
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
我的HTML文件是
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../dist/index.css" />
<meta charset="utf-8" />
<title>Resala Naser</title>
</head>
<body>
<div id="root"></div>
<script type="text/bable" src="../dist/index.js"></script>
</body>
</html>
我的index.js文件是：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";
import App from "./components/App";
window.onload = () => {
ReactDOM.render(<App />, document.getElementById("root"));
};
我的项目树
下面是一个快速列表：
- 看看电子样品的简单结构
- 您在js文件中导入css文件，没有webpack，这将不起作用，所以要么在项目中设置webpack要么简单地删除css导入并将其添加到html文件中
- 您正在导入html中的index.js文件，但路径错误，它们位于同一目录中
因此，在更改后，您的文件将如下所示：
组件/应用程序：
import React, { Component } from "react";
export default class App extends Component {
render(){
return <h1>this works</h1>
}
}
electron.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require("electron");
const path = require("path");
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`file:///${__dirname}/index.html`);
// Open the DevTools.
mainWindow.webContents.openDevTools();
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed.
app.on("window-all-closed", function() {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") app.quit();
});
app.on("activate", function() {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../dist/index.css" />
<meta charset="utf-8" />
<title>Resala Naser</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
和index.js
import React from "react";
import ReactDOM from "react-dom";
// import "./index.css";
// import "bootstrap/dist/css/bootstrap.min.css";
import App from "./components/App";
window.onload = () => {
console.log("this thing ");
ReactDOM.render(<App />, document.getElementById("root"));
};