反应和画布反应性

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 = () => {&nbsp; const ref = useRef();&nbsp; let [canvasCtx, setCanvasCtx] = useState(null);&nbsp; useEffect(() => {&nbsp; &nbsp; setCanvasCtx(ref.current.getContext('2d'));&nbsp; });&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <canvas ref={ref} width="800" height="800">&nbsp; &nbsp; &nbsp; </canvas>&nbsp; &nbsp; &nbsp; <Circle ctx={canvasCtx}></Circle>&nbsp; &nbsp; </div>&nbsp; );};