如何将反应点击事件传递给电子

Question

刚刚下载了电子反应样板，并开始使用样板，但是当我试图创建一个没有遮挡的透明窗口时，出现了一些问题，所以我创建了一个小的React组件，但是我不知道如何发送widnow最小化、最大化和关闭命令。我知道必须用ipcRenderer做一些工作，但我甚至不能将它导入到我的React组件中

至于测试，下载的电子反应样板4.4.0并试图在React组件中导入ipcRenderer，这是我的的代码，我正在附加控制台中获得的错误。

import { Component } from 'react';
import { ipcRenderer } from 'electron';

import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';

import icon from '../../assets/icon.svg';
import './App.css';

class Hello extends Component {
  componentDidMount() {
    console.log(ipcRenderer);
  }

  render() {
    return (
      <div>
        <div className="Hello">
          <img width="200px" alt="icon" src={icon} />
        </div>
        <h1>electron-react-boilerplate</h1>
        <div className="Hello">
          <a
            href="https://electron-react-boilerplate.js.org/"
            target="_blank"
            rel="noreferrer"
          >
            <button type="button">
              <span role="img" aria-label="books">
                
              </span>
              Read our docs
            </button>
          </a>
          <a
            href="https://github.com/sponsors/electron-react-boilerplate"
            target="_blank"
            rel="noreferrer"
          >
            <button type="button">
              <span role="img" aria-label="books">
                
              </span>
              Donate
            </button>
          </a>
        </div>
      </div>
    );
  };
}

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

ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in '/home/martinb/Escritorio/electron-react-boilerplate-4.4.0/node_modules/electron'
 @ ./src/renderer/App.tsx 10:19-38
 @ ./src/renderer/index.tsx 10:30-46

ERROR in ./node_modules/electron/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/martinb/Escritorio/electron-react-boilerplate-4.4.0/node_modules/electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./src/renderer/App.tsx 10:19-38
 @ ./src/renderer/index.tsx 10:30-46

webpack compiled with 2 errors
Not rewriting GET /index.html because the path includes a dot (.) character.

Answer 1

可以在react组件中使用window.electron.ipcRenderer。

ipcRenderer在preload.js中应该是必需的，预加载是BrowserWindow webPreferences的一个参数。

  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

请参阅：https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/src/main/main.ts