如何将 electronjs 菜单中的文件渲染到反应元素？

Question

我正在尝试将图像路径从主进程传递到我的 App.js。截至目前，我运行的问题是我的 canvas 元素为空：TypeError: Cannot read property 'drawImage' of null。我不太清楚为什么。这是我的 App.js:

import React from "react";
import { Router, Route, Link } from "react-router-dom";
import { Grid, Paper, makeStyles } from "@material-ui/core/";
import Tools from "./Tools.js";
import Dropzone from "./Dropzone.js";
import { createBrowserHistory as createHistory } from "history";
const history = createHistory();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myCanvas = React.createRef();
  }

  render() {
    const canvas = this.myCanvas.current;
    window.ipcRenderer.on("upload", (event, img) => {
      canvas.drawImage(img);
    });
    return (
      <Router history={history}>
        <Route path="/">
          <Tools />
          <canvas
            id="myCanvas"
            width="600"
            height="400"
            ref={this.myCanvas}
            style={{ border: "1px solid #000000" }}
          ></canvas>
        </Route>
      </Router>
    );

  }
}

export default App;

我尝试使用 document.getElementById('myCanvas')，但在研究后发现这不是获取元素的正确方法。使用 ref 时我仍然得到这个空值。我假设它与尚未在 DOM 中加载的组件有关，但我不确定。

Answer 1

您在第一次渲染组件之前设置了 upload 事件侦听器。此时myCanvas还没有设置（即myCanvas.current是null）。

您应该在确保 myCanvas 已设置后简单地创建 upload 事件侦听器。

为此，您可以使用 componentDidMount :

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myCanvas = React.createRef();
  }

  componentDidMount() {
    const canvas = this.myCanvas.current;
    window.ipcRenderer.on("upload", (event, img) => {
      canvas.drawImage(img);
    });
  }

  render() {
    return (
      <Router history={history}>
        <Route path="/">
          <Tools />
          <canvas
            id="myCanvas"
            width="600"
            height="400"
            ref={this.myCanvas}
            style={{ border: "1px solid #000000" }}
          ></canvas>
        </Route>
      </Router>
    );
  }
}

如何将 electronjs 菜单中的文件渲染到反应元素？

How do I render a file from the electronjs menu to a react element?

javascript

ipc

reactjs

electron