如何在 React-Electron 中使用 contextBridge？

Question

我正在尝试连接预加载和 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")
    }
})

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

这是错误消息。

any Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Electron'?ts(2551)

Answer 1

找了又问了一个星期，终于找到了。
只需将其添加到 frame.tsx.

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

多么简单啊...

如何在 React-Electron 中使用 contextBridge？

How to use contextBridge in React-Electron?

javascript

typescript

reactjs

electron