Reactjs 画布不会画任何东西-反应，打字脚本

我对TS完全陌生，我正在尝试用画布做一些简单的绘画。我没有收到任何错误，但没有显示任何内容，即使是函数内部的控制台日志也没有显示

function gameLoader() {
  const gameCanvas = document.getElementById("gameCanvas") as HTMLCanvasElement;
  var ctx = gameCanvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 150, 75);
  console.log(document.getElementById("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXxx"));
}

export default class SnakeTheGame extends React.Component<
  ISnakeTheGameProps,
  {}
> {
  public render(): React.ReactElement<ISnakeTheGameProps> {
    return (
      <div className={styles.snakeTheGame} id="gameWindow">
        <canvas
          id={"gameCanvas"}
          height="500px"
          width="500px"
          onLoad={() => gameLoader()}
        ></canvas>
      </div>
    );
  }
}

函数gameLoader（）{
const gameCanvas=document.getElementById（“gameCanvas”）作为HTMLCanvasElement；
var ctx=gameCanvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,150,75）；
console.log（document.getElementById（“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”）；
}
导出默认类SnakeTheGame扩展React.Component<
ISnakeTheGameProps，
{}
> {
public render（）：React.ReactElement{
返回(
gameLoader（）}
>
);
}
}

---

我只是不知道如何修复它。我将感谢您的帮助。

canvas onload仅在加载smth时启动，因此如果您将加载程序函数置于onload，它将永远不会运行

这是一个可能的解决办法

函数游戏加载器（游戏画布：HTMLCanvasElement）{
var ctx=gameCanvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,150,75）；
console.log（document.getElementById（“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”）；
}
导出默认类SnakeTheGame扩展React.Component<
ISnakeTheGameProps，
{}
> {
public render（）：React.ReactElement{
const ref=useRef（）；
useffect（（）=>gameLoader（ref.current），[]）；
返回(
);
}
}

canvas onload仅在加载smth时触发，因此如果将加载程序函数置于onload，它将永远不会运行

这是一个可能的解决办法

函数游戏加载器（游戏画布：HTMLCanvasElement）{
var ctx=gameCanvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,150,75）；
console.log（document.getElementById（“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”）；
}
导出默认类SnakeTheGame扩展React.Component<
ISnakeTheGameProps，
{}
> {
public render（）：React.ReactElement{
const ref=useRef（）；
useffect（（）=>gameLoader（ref.current），[]）；
返回(
);
}
}

请尝试以下代码：

导出默认类Testcanvas扩展React.Component{
public render（）：React.ReactElement{
返回(
);
}
公共组件didmount（）{
这个.gameLoader（）；
}
私有游戏加载程序（）：void{
const ctx=（this.refs.canvas作为htmlcanvaseElement.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,150,75）；
控制台日志（“XXXXXXXXXXXXXXXXXXXXXXXXXX”）；
}

请尝试以下代码：

导出默认类Testcanvas扩展React.Component{
public render（）：React.ReactElement{
返回(
);
}
公共组件didmount（）{
这个.gameLoader（）；
}
私有游戏加载程序（）：void{
const ctx=（this.refs.canvas作为htmlcanvaseElement.getContext（'2d'）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0,0,150,75）；
控制台日志（“XXXXXXXXXXXXXXXXXXXXXXXXXX”）；
}

游戏是否被任何东西渲染？你的应用程序是否被渲染到DOM中？是否有大小和ID正确的画布。（是否为sharepoint Web部件）使用ref，不要使用getElementByIdIs

SnakeTheGame

被任何东西渲染？你的应用程序是否被渲染到DOM中？是的，画布的大小和ID正确。（是sharepoint Web部件）使用ref，不要使用GetElementById谢谢你的推荐。抱歉，我有一段时间不在这里了。我尝试此操作时出现了一些错误，但现在我理解了canvas onLoad。非常感谢你的时间。谢谢你的推荐。抱歉，我有一段时间没有在这里。我尝试此操作时出现了一些错误，但现在我理解了canvas onLoad。谢谢非常感谢你的时间。