Получение координат элемента в React?

Question

[Denis_1334]

Допустим есть компонент :

import React, {useState} from 'react' 
let Block = () => {
     let [coors, setCoors] = useState(null) 
     return (
          <div>Hello World </div>
) 
}

Я могу к диву добавить событие клика и он мне вернёт объект event в котором я могу получить свойство getBoundingClientRect
Но как я могу могу во время вызова функции получить и сохранить в coors координаты данного элемента без всяких событий?

Answer 1

[alex4answ]

использовать ref и в componentDidMount() или useEffect() обращаться к ref.current

const ref = useRef();

useEffect(() => {
  const rect = ref.current.getBoundingClientRect();
});

return <div ref={ref} />;

Comments

[Denis_1334]

То есть ref.current.getBoundingClientRect вернёт координаты?
Ref.current вроде бы только value элемента возвращает

[alex4answ]

Denis_1334, это обычная ссылка на dom элемент, там есть все, ровно тоже если бы вы использовали document.querySelector() для доступа

[Denis_1334]

alex4answ, Всё заработало, спасибо.