electron - 电子反应样板：window.electron 不存在错误

Question

我正在使用 electron-react-boilerplate v4.0.0 我已经从 preload.js 公开了这个电子 api，以便在渲染器进程中使用。 preload.js

尝试在反应组件中使用“window.electron.ipcRenderer.printTicket()”时出现问题。

你好反应组件

我有错误：“类型'Window & typeof globalThis'上不存在window.electron”。

Answer 1

@丹尼尔，

尝试这个：-

从以下内容编辑您的 index.tsx：-

import { render } from "react-dom";
import App from "./App";


render(<App />, document.getElementById("root"));

像这样的东西： -

import { render } from "react-dom";
import App from "./App";

declare global {
  interface Window {
    electron: any;
  }
}

render(<App />, document.getElementById("root"));

现在您可以在渲染器中的任何位置使用 window.electron。这解决了我的问题。您也可以在 App.js 文件中添加它。

虽然我没有测试过，但你也可以这样做：-

preload.js

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

contextBridge.exposeInMainWorld('electron', {
  hworld: "Hello world" // window.electron.hworld is a string ("Hello world")
});

索引.tsx

import { render } from "react-dom";
import App from "./App";

declare global {
  interface Window {
    electron: {
      hworld: string // Since you know window.electron.hworld is a string
    }
  }
}

render(<App />, document.getElementById("root"));