[JavaScript知识库] electron+react 进程间通信碰见的问题解决

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> electron+react 进程间通信碰见的问题解决 -> 正文阅读

[JavaScript知识库]electron+react 进程间通信碰见的问题解决

在写主进程和react组件（渲染进程）间通讯时，碰见了很多的问题，主要如下

TypeError:fs.existsSync is not a function
Cannot destructure property ‘ipcRenderer’ of ‘window.electron’ as it is undefined.
electron react window.require is not a function
上述三个问题，主要是主进程和raect组件间通信的问题。解决方法如下：

main.js中

var electron = require('electron');
const {ipcMain} = require('electron')
var app = electron.app;     //引用app
var BrowserWindow = electron.BrowserWindow;   //窗口引用

var mainWindow = null;    //声明要打开的主窗口

app.on('ready',()=>{
    mainWindow = new BrowserWindow(
        {
            width:800,
            height:800,
            webPreferences:{
                nodeIntegration: true,   //改默认设置  在主进程中设置，允许使用node语法
             },
        });
    ipcMain.on('editfile',(event,arg)=>{
        console.log(arg);
    })
    mainWindow.loadURL('http://localhost:3000/');mainWindow.loadFile(path.join(__dirname,'./public/index.html'))
    // 关闭窗口时将主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null;
    })
})

主要是设置webPreferences中的nodeIntegration: true
2.index.html中
在public目录下找到index.html,在index.html中添加下面代码

    <script>global.electron = require('electron')</script>

在<body></body>里面 root之前，具体如下所示

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script>global.electron = require('electron')</script>
    <div id="root"></div>
  </body>

这个时候主进程中有了ipcMain ，也允许node语法的情况下
3.需要加ipcRenderer的react组件（渲染进程）中
引用下面的代码

const electron = window.electron;

这时候需要注意的是，这时候的引入不是在import React
from ‘react’后面跟，而是写在组件中。例如下面EditFile函数组件

import React from 'react'

export default function EditFile() {
    const electron = window.electron;   //在这里进行引入
    const minWindow = (e)=>{
        e.preventDefault()
        electron.ipcRenderer.send("editfile","pong")
    }
    return (
        <div>
            <h1 onClick={(e)=>minWindow(e)}>editfile</h1>
        </div>
    )
}