如何在React钩子中初始化第三方库（konvajs）

Question

我尝试在React钩子中初始化第三方库，我正在使用useEffect，但是我一直都得到 null 我尝试使用自定义钩子，但得到的结果相同（空）

有什么主意吗？

这是我的代码https://stackblitz.com/edit/react-rg9uov

谢谢

Answer 1

您的useEffect应该声明ref的依赖项数组，还不确定为什么使用const stage = useRef(null);吗？ stage可能只是组件状态。

 const [stage, setStage] = React.useState();
 const ref = useRef();

 useEffect(() => {
    if(ref.current){
      setStage(new Konva.Stage({
      container: ref.current, // id of container <div>
      width: 500,
      height: 300
    }))
    }

  },[ref]);

Answer 2

您看到null是因为console.log在useEffect之前运行，如果将console.log放在useEffect的末尾，则会看到Konva已正确初始化。