html - 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");
})