使用 React.useRef 时如何访问和更新存储在 ref.current 中的元素？

Question

function getElement(){
  const el = document.createElement('canvas');
  el.drawImage(...);
  ...
  return el;
}

function App() {
  const canvasRef = React.useRef(null);

  React.useEffect(()=>{
    const canvasEl = getElement(); // It returns HTMLCanvasElement
    document.body.append(canvasEl); // It works but it isn't my desired
    canvasRef.current = canvasEl; // It doesn't work
  }, []);
  
  return (
    <div><canvas ref={canvasRef} /></div>
  )

}

它是简化的代码，所以我的实际代码要复杂得多。

如何将HTMLCanvasElement注入ref ？

Answer 1

您不必创建新的 canvas 元素，因为您的 JSX 中已经有 canvas 元素。

分配 ref 后，您可以根据需要对其进行更新。

function updateCanvas(canvas) {
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 100, 100);
}

export default function App() {
  const canvasRef = useRef(null);

  useEffect(() => {
    updateCanvas(canvasRef.current);
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
}

Answer 2

你可以做这样的事情

import React from 'react';

function App() {
  const canvasRef = React.useRef(null);

  function addImageToElement() {
    const el = canvasRef.current;
    const ctx = el.getContext('2d');

    var img = new Image();
    img.src = 'https://picsum.photos/300';
    img.addEventListener(
      'load',
      () => ctx.drawImage(img, 10, 10, 150, 180),
      false
    );
  }

  React.useEffect(() => {
    addImageToElement();
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
}

export default App;

这是现场示例： https://stackblitz.com/edit/react-fajhkj