Javascript 在react代码中调用.getElementById后返回Null

我对react和HTML5是新手，我尝试创建一个画布，其中一个下面有3个图像。我用react来做这个

我创建了一个呈现应用程序组件的函数。此函数返回如下内容

return (
    <div className="App">
      <canvas className="canvas1" id="canvas1" width="70" height="300"></canvas>
      {Game()}
    </div>
  );

我面临的问题是上面的代码无法编译。我得到一个错误，getElementById返回Null

TypeError:document.getElementById（…）为空

我不明白发生了什么事。我怀疑某些东西没有正确加载，当我调用getElementById时c1中没有任何内容，但我无法找到如何检查这种可能性

如何开始调试它？

---

谢谢您的时间。

当您想在DOM上操作时，直接考虑使用REFS，下面是钩子实现。

const-App=（）=>{
const ref=React.useRef（null）；
React.useffect（（）=>{
const canvas=ref.current
const ctx=canvas.getContext（“2d”）
}, [])
返回(
{Game（）}
);
}

没有对图像的引用 例如：

类画布扩展React.Component{
render（）{
返回(
)
}
}
导出默认画布

function Game() {
    var c1 = document.getElementById("canvas1").getContext("2d");
    //Here the code will do changes to the canvas element


    this.draw(true);
  }

 class Canvas extends React.Component {
    render() {
        return(
          <div>
            <canvas ref="canvas" width={640} height={425} />
            <img ref="image" src={cheese} className="hidden" />
          </div>
        )
      }
    }
    export default Canvas