無法在 ipcRenderer 的反應組件中導入 electron

Question

所以我試圖將 ipcRenderer 導入到反應組件中以與 electron 端進行通信。 問題是我無法導入 electron。我試過了

import { ipcRenderer } from 'electron/renderer'

未找到返回模塊電子/渲染器

import { ipcRenderer } from 'electron'

返回 fs.existsSync 不是 function

const renderer = require('electron');

返回 fs.existsSync 不是 function

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

返回 fs.existsSync 不是 function

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

返回 window.require 不是 function

我不知道該怎么辦了，我已經嘗試了一切

Answer 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>
    ...
    ...

Answer 2

我曾經有同樣的問題。 您不應該直接在渲染器/反應組件中導入 electron。 相反，在您的 preload.ts 文件中，您可以使用 electron-react-bolierplate 的一些基本配置。

所以在你的反應組件中，你應該使用window.electron.ipcRenderer.on('channel-name', args)示例

 const myEventHandler = () => { window.electron.ipcRenderer.on('channel-name', (event, data) => { console.log('data, event', data, event); }); };

window.electron，這里的electron是preload.ts文件中給的名字。 contextBridge.exposeInMainWorld('electron', {...})