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

Question

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

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

我已经添加了顺风 CSS，但无法想象这会导致这里出现问题。下面是我的代码。

应用程序.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（在事件监听器部分添加的代码片段）

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');
    },
  },
});

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

Answer 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")
});

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