Question

无法读取未定义的属性“getContext”

2020-05-22

1012

reactjs canvas range

过去，我已经与JavaScript合作。我整理了一个项目，使我的脚用canvas在React中湿润。我正在创建一棵分形树。该树可以由范围以直角和左角，右长度和左长度来控制。还有一个复选框，可以使树叶叶子或去除它们。

关于在React I中使用Canvas，我对GetContext（'2d'）有一个问题。我正在收到一条错误消息：

203625056

canvas.getContext（'2d'）分配给使用效率的CTX。我需要在其他方法中访问CTX。如何使CTX访问？

649254294

Answer 1

您可以创建一个 ref 来存储上下文并在其他函数中使用该值

  const canvasRef = useRef(null);
  const ctx = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    ctx.current = canvas.getContext("2d");
  }, []);

工作演示

Answer 2

React 官方文档中说： “我们在此示例中没有选择 useRef，因为对象 ref 不会通知我们当前 ref 值的更改。”

您应该使用 useCallback 创建回调，而不是 useRef 。

  const setCanvasRef = useCallback(node => {
    if (node !== null) {
     // logic you need
    }
  }, []);

  ...
      <canvas ref={setCanvasRef} width="800" height="400"/>
  ...

我希望这能帮助您弄清楚 useEffect Hooks 内的 Ref 对象