如何在 React-Electron 中使用 contextBridge？答案

【问题标题】：How to use contextBridge in React-Electron?如何在 React-Electron 中使用 contextBridge？
【发布时间】：2021-08-07 07:17:03
【问题描述】：

我正在尝试连接 preload 和 frame.tsx
但是，它不起作用。

frame.tsx

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

我只是添加它。还有……

preload.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")
    }
})

我只复制必要的部分。
如果您需要更多代码，请在此处发表评论。
我真的不知道为什么它不起作用。

这是错误消息。

任何属性 'electron' 不存在于类型 'Window & typeof 全球这个'。您的意思是“电子”吗？ts(2551)

【问题讨论】：

我对 Typescript 了解不多，但您可能必须声明您添加到窗口对象的新 API：stackoverflow.com/a/12709880/13752696
@Foxeared 感谢您的帮助！我不确定我是否知道这一点，但感谢您的评论，我可以得到提示！

标签： javascript reactjs typescript electron

【解决方案1】：

找了一周，终于找到了。
只需在 frame.tsx 中添加即可。

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

多么简单啊……

【讨论】：

顺便说一句，如果它解决了您的问题，您应该将答案标记为正确。
@Foxeared 哦，我明白了！谢谢！