Реактивность и реактивность холста

Question

Я хотел бы интегрировать canvas в свое приложение React.

const Comp = () => {
  const ref = useRef();
  let canvasCtx = null;

  useEffect(() => {
    canvasCtx = ref.current.getContext('2d');
  });
  return (
    <div>
      <canvas ref={ref} width="800" height="800">
      </canvas>
      <Circle ctx={canvasCtx}></Circle>
    </div>
  );
};

Проблема в том, что мне нужно сначала смонтировать элемент canvas, прежде чем я смогу получить контекст. Дочернему элементу Circle нужен контекст для работы.

Вот код Circle (который на самом деле не является кругом ...)

const Circle = ({ ctx }) => {
  if (ctx) {
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
  return null;
};

К сожалению, условие никогда не бывает правдой

Как я могу убедиться, что дети обновляются, когда canvasCtx готов?

Answer 1

Вам необходимо сделать его переменным состояния, чтобы при обновлении он повторно отображал компонент

const Comp = () => {
  const ref = useRef();
  let [canvasCtx, setCanvasCtx] = useState(null);

  useEffect(() => {
    setCanvasCtx(ref.current.getContext('2d'));
  });
  return (
    <div>
      <canvas ref={ref} width="800" height="800">
      </canvas>
      <Circle ctx={canvasCtx}></Circle>
    </div>
  );
};