gpt4 book ai didi

javascript - 如何在 react 和 Electron 之间进行通信

转载 作者:行者123 更新时间:2023-12-03 07:06:27 37 4
gpt4 key购买 nike

使用 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(<></>)
}

main.js
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', ''); 将结果从主进程发送到渲染器

所以这意味着,您通过 return-exe 发送结果从主 channel 到渲染器的 IPC channel 。你应该在你的渲染器上监听这个 channel 的事件。像这样
ipcRenderer.on('retrun-exe', (event, arg) => {
...
});

您可以在生命周期函数中添加此监听器。我习惯将此添加到 componentDidMount()但在您的情况下,请将其添加到您的 useEffect()

关于javascript - 如何在 react 和 Electron 之间进行通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59681069/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com