How to handle multiple windows in Electron application with ReactJS ?

Handling multiple windows in Electron applications typically involves several key steps, and integrating React can make interface development more modular and manageable. I'll outline the process in several parts:

1. Creating and Managing Multiple Windows

In Electron, each window is represented by a BrowserWindow instance. In the main process, you can create multiple BrowserWindow instances to display different frontend pages. For instance, an application might have a main window and a settings window. This can be implemented using Electron's main process code:

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

function createWindow () {
  // Create main window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Create settings window
  const settingsWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    },
    parent: mainWindow, // Optional parent-child window relationship
    modal: true,        // Optional modal window
    show: false         // Initially hidden
  });

  // Load window HTML content
  mainWindow.loadFile('index.html');
  settingsWindow.loadFile('settings.html');
}

app.on('ready', createWindow);

2. Rendering Window Content with React

Each window can load different HTML files, which can be linked to their respective React applications. For example, index.html is linked to the main window's React application, while settings.html is linked to the settings window's React application. In these HTML files, you can use the <script> tag to include the compiled React code.

index.html

html
<!DOCTYPE html>
<html>
<head>
    <title>Main Window</title>
</head>
<body>
    <div id="root"></div>
    <script src="mainWindow.js"></script>
</body>
</html>

settings.html

html
<!DOCTYPE html>
<html>
<head>
    <title>Settings Window</title>
</head>
<body>
    <div id="root"></div>
    <script src="settingsWindow.js"></script>
</body>
</html>

In your React project, you can create separate entry files for each window (e.g., mainWindow.js and settingsWindow.js), which render the corresponding components for each window.

3. Inter-Window Communication

Electron provides several ways to implement inter-window communication, with the most common being through the main process as a relay. Windows can send messages to the main process using ipcRenderer, and the main process can receive these messages using ipcMain and forward them to other windows.

Sending messages from React components:

javascript
const { ipcRenderer } = window.require('electron');

function sendMessage() {
    ipcRenderer.send('channel1', 'Hello from Main Window!');
}

Handling messages in the main process and forwarding:

javascript
const { ipcMain } = require('electron');

ipcMain.on('channel1', (event, message) => {
  console.log(message); // Receive and log the message
  // Optionally forward the message to other windows
  settingsWindow.webContents.send('channel1', message);
});

By following these steps, you can effectively manage and utilize multi-window interfaces driven by React in Electron applications, and implement data interaction between windows.

2024年7月3日 22:02 回复

1个答案

1. Creating and Managing Multiple Windows

2. Rendering Window Content with React

3. Inter-Window Communication

你的答案