如何在react和电子之间进行通信

IT技术 javascript reactjs electron
2021-03-30 21:11:02

使用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', '');
});

如何克服这个问题？

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()

使用简单，直接require。您应该在创建 browserWindow 时启用 nodeIntegration 标志为 true
2021-05-23 21:11:02
UI未正确呈现..它触发了事件
2021-05-24 21:11:02
@疯狂。为什么那个 ui 一半渲染是什么意思
2021-06-03 21:11:02
如何在反应中收听渲染器事件的主进程..为什么那个 ui 一半渲染。
2021-06-12 21:11:02
@Krazy 使用你的需求检查这个答案stackoverflow.com/questions/59533379/...
2021-06-15 21:11:02
其它你可能感兴趣的问题
上一篇React：如何在将“this.state.x”用于函数之前等待数据？ 下一篇单元测试 React Bootstrap 模态对话框