如何将数据从电子发送到渲染器页面中的反应组件？答案

【问题标题】：How to send a data from electron to a react component in renderer page?如何将数据从电子发送到渲染器页面中的反应组件？
【发布时间】：2022-12-23 15:29:42
【问题描述】：

这个post解释了如何使用mainWindow.webContents.sendfunction使用.html和javascript将数据“提交形式”从电子发送到“内部”渲染页面。

问题是：这在 React 中不起作用。我的应用程序甚至没有将 ipcRenderer 或 electron 识别为 app.tsx（主根组件）内的东西。

https://www.electronjs.org/docs/latest/api/web-contents#contentssendchannel-args

服务器端：

const mainWindow = createWindow('main', {
    width: 1920,
    height: 1080,
    minWidth: 1366,
    minHeight: 768,
    webPreferences: {
      nodeIntegration: true
    }
  })

if (isProd) {
    await mainWindow.loadURL('app://./home.html')
} else {
    const port = process.argv[2]
    await mainWindow.loadURL(`http://localhost:${port}/home`)
    mainWindow.webContents.openDevTools()
}

mainWindow.webContents.on('did-finish-load', () => {
   mainWindow.webContents.send('submitted-form', "hello")
})

应用程序.tsx：

// error since electron is not available within app.tsx
// electron requires 'fs' modules which client-side doesn't have
const { ipcRenderer } = require("electron")

class _app extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
  }

 componentDidMount() {
    ipcRenderer.on("submitted-form", function (event, data) {
      console.log("received data", data)
    })
  }
}

【问题讨论】：

标签： reactjs electron

【解决方案1】：

万一你没有成功

我在 main 和 renderer 之间传递信息的方式如下：

对于 main.js（主电子进程）

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

const ProductService = require('./services/product.service');

const productService = new ProductService();

/*This "service" is some "promise" data from sequelize, just keep in mind 
the data here is a promise*/
async function getProducts() {
  const products = await productService.getAllProducts();
  return products
}


function mainWindow() {
    const mainWin = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
          preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWin.loadFile('./public/index.html');
    mainWin.loadURL('http://localhost:3000')
}

app.whenReady().then(() => {
    /* Here is where you send the message which you have to recive from 
       your preload file, the first arg is the name by which you will 
       identify it and the second is the message itself */
    ipcMain.handle('products', getProducts);
    mainWindow()
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) mainWindow()
    })
  })

在预加载文件中，您应该像这样接收它：

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

contextBridge.exposeInMainWorld('Products', {
    products: () => ipcRenderer.invoke('products').then(result => result)
})

在组件的最后，你想要呈现你需要接收信息的信息，如下所示：

React.useEffect(() => {
        /* These are the names that you into the preload file */
        window.Products.products()
        .then(result => {
            setRows(result)
        }
            )

}, [])

【讨论】：