как инициализировать стороннюю библиотеку (конва js) в реагирующих хуках

Question

Я пытаюсь инициализировать стороннюю библиотеку. В перехватах React я использую useEffect, но получаю все время null Я пытался использовать пользовательские перехватчики, но получаю тот же результат (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 правильно инициализирована.