Реагируйте на TypeScript, не могу использовать контекст для изменения холста - PullRequest
0 голосов
/ 09 февраля 2020

Холст отрисовывается в правильном размере, но холст никогда не заполняется синим цветом, я не понимаю почему?

import React, { useRef } from 'react';

const App = () => {
  console.log('this prints just fine');
  const canvasWidth = 820;
  const canvasHeight = 620;
  const canvasRef = useRef<HTMLCanvasElement>(null);
  console.log(canvasRef.current) // null
  if (canvasRef.current) {
    console.log('this never prints!!');
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (ctx) {
      console.log('this never prints!!');
      ctx.fillStyle = 'blue';
      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
    }

  }
  return (
    <canvas
      ref={canvasRef}
      width={canvasWidth}
      height={canvasHeight}
    >
    </canvas>
  );
};

export { App };

ОБНОВЛЕНИЕ

const App: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasWidth = 820;
  const canvasHeight = 620;
  useEffect(() => {
...

Выше решена проблема

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...