如何使用 contextBridge 從 Electron main.js 調用 React 組件 function

Question

正如標題所述，我想調用 Electron main.js 文件中我的一個 React 組件中定義的 function。 我知道如何反其道而行之，例如，用戶單擊一個按鈕，它會在 main.js 中調用 function，然后返回到 React 組件。 我需要相反，main.js 調用 React function 然后將結果返回給 main。

我不能簡單地擁有 main.js 中的所有功能，因為我無法將 DOM 對象從 React 傳遞給 main（它導致錯誤“對象無法克隆”）。 所以我認為將請求發送到 React，讓我的應用程序的 React 端做這些事情，然后將結果字符串返回給 main 應該不會太難。

我在這里找到了許多其他類似的帖子，其中提供了各種解決方案，但沒有一個專門針對這個確切的問題。 #1 暴露了 ipcRenderer，這是一種糟糕的安全實踐，我無法承受。 #2 和 #3 僅針對普通 Javascript 進行解釋，而不是 React 組件。 雖然#4 確實處理 React，但它不處理 Electron，它是為 React 類設計的（我使用的是功能組件）。

我的嘗試看起來像這樣一團糟：

    const [mounted, setMounted] = useState(false)

    if(!mounted){
        window.reactFunction = myFunction;
    }
  
    useEffect(() =>{
      setMounted(true)
    },[])

    window.electron.receive("fromMain", async () => {
        return myFunction();
    });

    async function myFunction()
    {       
        return "result";
    }

但是，function 反而在渲染期間被調用，並且不被 contextBridge 調用。 這是我的 preload.js：

contextBridge.exposeInMainWorld('electron', {
 
    receive: async (channel, func) => {
        let validChannels = ["fromMain"];
        if (validChannels.includes(channel)) {
            return await ipcRenderer.on("fromMain", (event, ...args) => func(...args));
        }
    }
});

由於某種原因 preload.js 腳本沒有被執行。 這是 main.js：

       const result = window.webContents.send('fromMain');

我還發現了這個討論，其中明確了與直接調用 ipcRenderer 相關的安全問題，因此我想使用 contextBridge（無論如何我已經在使用它來從 React 調用主要函數）。 這也是我的 preload.js 代碼的來源。 但是那個例子也沒有使用 React。

這甚至可能嗎？ 或者我應該以不同的方式解決這個問題？

Answer 1

看起來我在這一行輸入錯誤：

return await ipcRenderer.on("fromMain", (event, ...args) => func(...args));

在這一行中，我返回 function，因此 function 本身沒有被調用。 刪除“返回”，它將起作用。 “等待”似乎沒有什么不同。

但是，一旦您調用 function，它實際上無法返回任何內容。 因此，您需要從渲染器再次調用 main，如下所示：

    window.electron.receive("fromMain", async () => {
        const returnValue = await myFunction();
        window.electron.sendReturnValue(returnValue);
    });

    async function myFunction()
    {       
        return "result";
    }

除非還有更好的方法，但這暫時解決了我的問題，並希望對其他人有所幫助。