无法在 ipcRenderer 的 React 组件中导入电子

Question

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

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 不是一个函数

我不知道该怎么办了，我已经尝试了一切

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

我以前也遇到过同样的问题。您不应该直接在渲染器/反应组件中导入电子。相反，在您的 preload.ts 文件中，您将通过 electro-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，这里的 electro 是 preload.ts 文件中给出的名称。

contextBridge.exposeInMainWorld('electron', {...})

Answer 3

嘿伙计，已经一年半了，我希望你已经找到答案了 无论如何这对我有用 //简单示例App.js

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import SignUp from './signUp';
import Login from './Login';
function App() {
  var [ ipcRenderer, setIpcR ] = useState( null )
  useEffect( () => {
    setIpcR( window.ipcRenderer )
    console.log( ipcRenderer )
  },[ ipcRenderer ] )
  return (
    <>
      <Router>
        <Routes>
          <Route path='/signup' element={ <SignUp ipcRenderer={ ipcRenderer } /> } />
          <Route path='/login' element={ <Login ipcRenderer={ ipcRenderer } /> } />
        </Routes>
      </Router>
    </>
  );
}
export default App;

//预加载.js

const { contextBridge, ipcRenderer } = require( 'electron' );

contextBridge.exposeInMainWorld( 'ipcRenderer', {
  send: ( channel, data ) => ipcRenderer.send( channel, data ),
  on: ( channel, func ) =>
    ipcRenderer.on( channel, ( event, ...args ) => func( ...args ) ),
} );

向我们提供您得到的任何其他答案 这是我第一次回答堆栈溢出问题 如果对你有用的话希望你支持我:D