在电子应用程序中使用 contextBridge/preload 时如何更新反应状态

Question

我有一个使用 React 的电子应用程序。我在 preload.js 中使用 contextBridge。我想通过桥将 app.js 中的变量传递给主进程中的函数； returns 一个值到桥并返回到 app.js 它将以某种方式更新状态并触发重新渲染。下面的代码一直工作到让状态更新的地步。我不明白如何获取从 preload.js 到 app.js 的变量？我希望的临时 hack 是从预加载设置 localstorage 并调用 setTimeout 函数来监视特定变量的变化。我知道这是一种不太有趣的方法。代码在这里：

app.js -

async function createSpreadsheet() {
  let x = await electron.google.createSpreadsheetFiles(sheetFileName)
}

preload.js -

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

contextBridge.exposeInMainWorld('electron', {
  google: {
    createSpreadsheetFiles(name) {
      ipcRenderer.send('gCreateSpreadSheetFile', name);
      let x = ipcRenderer.on('gCreateSpreadSheetFile-return', function (event, arg) {
      })
      return x
    },
  },
})

main.js -

  ipcMain.on('gCreateSpreadSheetFile', (event, name) => {
    async function all() {
      let resp = await g.createSheetFile(name, win)
      event.sender.send('gCreateSpreadSheetFile-return', resp)
    }
    all()
  })

Answer 1

您可以使用 ipcRenderer 调用和 ipcMain 句柄：

preload.js

contextBridge.exposeInMainWorld('electron', {
  google: {
    createSpreadsheetFiles: (name) => ipcRenderer.invoke('gCreateSpreadSheetFile-invoke', name),
  },
});

main.js

ipcMain.handle('gCreateSpreadSheetFile-invoke', (event, name) => {
  return 'value';
});

renderer

window.electron.google.createSpreadsheetFiles(spreadSheetName).then((value) => {
  console.log(value);
});
// or
var value = await window.electron.google.createSpreadsheetFiles(spreadSheetName);

关于文档：https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args

Answer 2

好的，我很抱歉在回答部分发布了另一个问题，我不明白如何在评论回复中格式化代码。

这段代码仍然不会return到app.js:

app.js    

const res = await electron.g.createSpreadsheetFiles(sheetFileName)
        console.log(res) // prints undefined, before code is excecuted

return 无需等待来自 preload.js 的 return 即可获取资源。这是来自 preload.js

的代码

preload.js    

g: {
        createSpreadsheetFiles(name) {
          (async () => {
            const result = await ipcRenderer.invoke('gCreateSpreadSheetFile-invoke',  name);
            return result; 
          })();
      }

在电子应用程序中使用 contextBridge/preload 时如何更新反应状态

How to update react state when using contextBridge/preload in electron app

reactjs

electron

ipcmain

ipcrenderer