微日志_免费提供日志记录|作品展示|学习教程|免费日记

解决React中和Electron进行通信报错问题

electron+react 阅读:159

体验地址:暂无地址

在客户端开发的时候,选择的技术栈是Electron和React技术栈,Electron用于一些原生的内容调用,React用于大部分布局,功能的开发,而这两者桥接的时候,会涉及到通信,使用的模块是ipcMain和ipcRenderer两个模块,但是在react中引入ipcRenderer的时候,会出现无法导入或者找不到的情况,本篇将记录如何解决。

参考网络各种教程,最后选定了一个解决方案,就是使用webpack的target配置进行修复。下面看代码配置:

react-->config-overrides.js配置文件

const electronRender = () => {
return (config) => {
config.target = 'electron-renderer';
return config;
}
}

然后配置到webpack中,如下图

react 要用的文件:

const {ipcRenderer} = require('electron');
const sendMessage = function(type:string,msg:any){
// ipcRenderer.send(type,msg);
ipcRenderer.invoke(type, msg).then((result:any) => {
console.log(result)
})
}

electron配置:

mainWindow = new BrowserWindow({width:400,height:400,webPreferences: {
nodeIntegration: true,
}})

electron使用

ipcMain.handle('message', async (event, someArgument) => {
return someArgument
})