Electron-React-Boilerplate 4.0：“Window & typeof globalThis”类型上不存在属性“electron”。您指的是“电子”吗？答案

【问题标题】：Electron-React-Boilerplate 4.0: Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Electron'?Electron-React-Boilerplate 4.0：“Window & typeof globalThis”类型上不存在属性“electron”。您指的是“电子”吗？
【发布时间】：2021-12-07 12:16:27
【问题描述】：

我正在尝试通过内置上下文桥调用 IPCrenderer 并收到以下错误：

Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Electron'?

我添加了顺风 CSS，但无法想象这是导致问题的原因。以下是我的代码。

App.tsx

import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';
import './App.global.css';

const Login = () => {
  const handleButtonClick = () => {
    window.electron.ipcRenderer.onButtonClick('Button Clicked');
  };

  return (
    <div>
      <button
        type="button"
        onClick={handleButtonClick}
        className="bg-black text-white p-2 font-bold rounded-xl shadow-xl outline-none hover:bg-gray-500 transform hover:scale-110"
      >
        Login &gt;
      </button>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Login} />
      </Switch>
    </Router>
  );
}

main.tsx（在事件监听器部分添加了代码 sn-p）

ipcMain.on('button-example', (arg) => {
  console.log(arg);
});

preload.js

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

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    onButtonClick() {
      ipcRenderer.send('button-example', 'Button Clicked');
    },
  },
});

有关此主题的任何指导都会有所帮助。

【问题讨论】：

标签： reactjs electron electron-react-boilerplate

【解决方案1】：

@FBS 开发者，

我也有同样的问题。在我搜索互联网后，我想出了这个解决方案：-

通过以下方式编辑您的 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")
});

index.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"));

【讨论】：