反应和画布反应性

Question

我想将画布集成到我的 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>

  );

};