React SVG Manipulation[Electron](如果连接了DB，则更改颜色)

Question

我目前正在React中构建一个桌面应用程序，该应用程序通过Sequelize连接到mySQL数据库。首先，我加载连接到数据库的main.js文件，并加载主窗口index.html。

在这个index.html中，我有一个圆圈，当数据库连接时，它应该变成绿色，当不连接时，应该变成红色

问题：我用classList尝试过，但我得到的不是贪婪的圆圈，而是错误"cannot read property classList of null"，圆圈保持灰色。有人知道我做错了什么吗？

我的代码：

main.js:

const connState = document.getElementById("connectionState");

function createWindow (tabName, imagePrefix, jQuery) {
// Create the browser window.

const mainWindow = new BrowserWindow({

width: 930,
height: 650,
backgroundColor: '#153037',
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}

})
// and load the index.html of the app.
mainWindow.loadFile('./Pages/index.html')
connection.connect();
const {Sequelize, DataTypes} = require("sequelize");
const sequelize = new Sequelize('mysql://exampleconnection');

sequelize

.authenticate()
.then(() => {
console.log('Connection successfully made.');
connState.classList.add("connected");
connState.classList.remove("notConnected");

})
.catch(() => {
console.log('Error connecting to database');
connState.classList.add("notConnected");
connState.classList.remove("connected");


});

和：

index.html:
<text class="titel"> Statusanzeige </text>

<div className="connection">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.04747,0,0,1.04747,4.75659,4.03844)">
<text x="21.032px" y="13.026px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:white;"> &ensp; mit Datenbank verbunden</text>
</g>
<g transform="matrix(1.05652,0,0,1.18757,0.119163,-1.87565)">
<ellipse id="connectionState" cx="12.963" cy="10" rx="8.519" ry="7.579"/>
</g>
</svg>
</div>
</body>
</html>
<style>
.titel {
margin-top: 50px;
margin-left: 50%;
color:white;
font-size:larger;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
z-index: 30000000;
}
.connection {
margin-top: 150px;
margin-left: 30%;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
z-index: 30000000;
}
#connectionState {
fill: grey;
}
#connectionState.connected {
fill: rgb(78, 246, 0);
}
#connectionState.notConnected {
fill: red;
}
</style>

Answer 1

const connState = document.getElementById("connectionState");

这是错误的。我们不能在主进程中使用document。浏览器API和浏览器全局变量仅在渲染器进程中可用。

main.js

webPreferences: {
nodeIntegration: true,
...
.then(() => {
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.send('DB-Connected');
})          
})

以及在渲染器.js或html上。

const {ipcRenderer} = require("electron");
ipcRenderer.on('DB-Connected', (event, data) => {
connState.classList.add("connected");
connState.classList.remove("notConnected");
})