使用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', ''); });
如何克服这个问题?
在您的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-exeIPC通道将结果从main发送到渲染器。并且您应该在渲染器上监听此通道的事件。像这样
return-exe
ipcRenderer.on('retrun-exe', (event, arg) => { ... });
您可以在生命周期功能中添加此侦听器。我曾经将其添加到componentDidMount()您的情况下,但请您将此添加到您的useEffect()
componentDidMount()
useEffect()