如何在 React-Electron 中使用 contextBridge？

Question

我正在嘗試連接 preload 和 frame.tsx
但是，它不起作用。

框架.tsx

function handleButtonClick(id: string) {
    window.electron.send("requestWindowChange", "data") // Error part
    if(id === 'maximize') {
        setIsMaximize(!isMaximize)
    }
}

我只是添加它。 和...

預載.ts

import {contextBridge, ipcRenderer} from 'electron'

contextBridge.exposeInMainWorld('electron', {
    send: (channel:string, data) => {
        let normalChannels = ['requestWindowChange']
        if (normalChannels.includes(channel)) {
            ipcRenderer.send(channel, data)
        }
    },
    receive: (channel:string, func) => {
        let normalChannels = ['responseWindowChange']
        if (normalChannels.includes(channel)) {
            ipcRenderer.on(channel, (_event, data) => func(data))
        }
    }
})

另外，我已經使用“tsc”命令將“preload.ts”轉換為“preload.js”。

最后，這里是 electron.ts

mainWindow = new BrowserWindow({
    height: 720,
    width: 1280,
    minHeight: 300,
    minWidth: 450,
    frame: false,
    show: false,
    center: true,
    fullscreen: false,
    kiosk: !isDev,
    resizable: true,
    webPreferences: {
        preload: path.join(__dirname, "preload.js")
    }
})

我只復制必要的部分。
如果您需要更多代碼，請在此處發表評論。
我真的不知道為什么它不起作用。

• 這是錯誤消息。

“Window & typeof globalThis”類型上不存在任何屬性“電子”。 您的意思是“電子”嗎？ts(2551)

Answer 1

我正在嘗試搜索並詢問一周，終於找到了。
只需在 frame.tsx 中添加它。

declare global {
    interface Window {
        api? : any
    }
}

這是多么的簡單……