[英]how to communicate between react and electron
使用react和electron创建桌面应用程序。我想从react组件调用electron的main.js中的方法。在angular中有一个npm包。
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(<></>)
}
主文件
electron.ipcMain.on('get-exe', () => {
console.log('reaciovg');
mainWindow.webContents.send('return-exe', '');
});
如何克服这个问题?
在你的 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', '');
将结果从主进程发送到渲染器mainWindow.webContents.send('return-exe', '');
所以这意味着,您通过return-exe
IPC 通道将结果从 main 发送到渲染器。 你应该在你的渲染器上监听来自这个频道的事件。 像这样
ipcRenderer.on('retrun-exe', (event, arg) => {
...
});
您可以在生命周期函数中添加此侦听器。 我习惯将它添加到componentDidMount()
但在你的情况下,请将它添加到你的useEffect()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.