Блог

Я импортирую файл SVG в качестве компонента и пытаюсь получить его измерение, но он возвращает null. Может кто-нибудь дать мне совет для достижения этой цели.

PS. getBBox() не работает, выдает ошибку.

Пример кода:

 import IconSVG from 'public/images/my-svg.svg';
  
const MyComponent = () => {
  const myRef = React.useRef(null);

  React.useEffect(() => {
    console.log(myRef.current);
  }, []);

  return (
    <div>
      <IconSVG ref={myRef} />
    </div>
  );
};
  

Вместо этого вы должны использовать useCallback() :

 const MyComponent = () => {
  const myRef = React.useCallback(node => {
    if (node !== null) {
      console.log(node.current.getBoundingClientRect()); // get dimensions
    }
  }, []);

  return (
    <div>
      <IconSVG ref={myRef} />
    </div>
  );
};