如何与电子反应

Question

使用react和electronic创建桌面应用程序。我想从react组件中调用main.js电子方法。

import React, { useState, useEffect, useRef } from 'react';
import './diagnosis.css';
const electron = window.require('electron');// if i use require('electron') throws error
function Diagnosis(props) {
    const [data, setData] = useState({ hits: [] });
    useEffect(() => {
        getExeFiles();
    });
    const getExeFiles = () => {
        electron.ipcRenderer.send('get-exe'); 
    }
    return(<></>)
}

main.js

electron.ipcMain.on('get-exe', () => {
    console.log('reaciovg');
    mainWindow.webContents.send('return-exe', '');
});

如何克服这个问题？

Answer 1

在您的Renderer.js

const { ipcRenderer } = require('electron');

async function runCommand(cmd) {
  const res = await ipcRenderer.sendSync('runCommand', cmd);
  return res;
}

在您的main.js

// Listen event through runCommand channel
// And return the result to Renderer.
ipcMain.on('runCommand', async (event, arg) => {
  event.returnValue = await runCommand(arg);
});

这是在主进程与渲染进程之间进行通信的最简单方法。

但是我认为您将使用以下方法将主过程的结果发送到渲染器 mainWindow.webContents.send('return-exe', '');

因此，这意味着您正在通过return-exeIPC通道将结果从main发送到渲染器。并且您应该在渲染器上监听此通道的事件。像这样

ipcRenderer.on('retrun-exe', (event, arg) => {
    ...
});

您可以在生命周期功能中添加此侦听器。我曾经将其添加到componentDidMount()您的情况下，但请您将此添加到您的useEffect()