无法在 ipcRenderer 的反应组件中导入电子答案

【问题标题】：cannot import electron in react componment for ipcRenderer无法在 ipcRenderer 的反应组件中导入电子
【发布时间】：2022-01-03 08:09:15
【问题描述】：

所以我试图将 ipcRenderer 导入到反应组件中以与电子端进行通信。问题是我无法导入电子。我试过了

import { ipcRenderer } from 'electron/renderer'

返回未找到模块电子/渲染器

import { ipcRenderer } from 'electron'

返回 fs.existsSync 不是函数

const renderer = require('electron');

返回 fs.existsSync 不是函数

const renderer = require('electron').ipcRenderer;

返回 fs.existsSync 不是函数

const renderer = window.require('electron');

返回 window.require 不是函数

我不知道该怎么办了，我什么都试过了

【问题讨论】：

我也一样！我觉得你兄弟，希望有人回答正确的答案！

标签： javascript node.js reactjs electron

【解决方案1】：

我明白了！他们使用 electron-react-bolierplate 准备了一个自定义 preload.js 脚本，该脚本向渲染的组件公开了三个函数：myPing：（只是一个演示，发送向控制台发送 ping 消息）并公开 on 和 once ipcRenderer 方法

import { Component } from 'react';
...
...
    class Hello extends Component {
      componentDidMount() {
        console.log('Mounted!', 'Window', window, 'electronApi', window.electron, 'ipcRenderer', window.electron.ipcRenderer);
    
        window.electron.ipcRenderer.on('ipc-example', (arg) => {
          // eslint-disable-next-line no-console
          console.log(arg);
        });
    
        window.electron.ipcRenderer.myPing();
      }
    
      render() {
        return (
          <div>
    ...
    ...

【讨论】：