javascript - electronjs メニューから react 要素にファイルをレンダリングするにはどうすればよいですか?

Question

メイン プロセスから App.js にイメージ パスを渡そうとしています。今のところ、問題は、キャンバス要素が null: であるということです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を使用すると、このnull値が引き続き取得されます。コンポーネントがまだDOMにロードされていないことに関係があると思いますが、よくわかりません。