Как я недавно спросил у Дана Абрамова в Твиттере , я пытаюсь провести некоторые измерения DOM-узлов, следуя этому примеру в официальных документах React.
Используя пользовательский hook с именем useOffset, что-то вроде этого:
function useOffset() {
const [offset, setOffset] = useState(null);
const ref = useCallback(node => {
if (node !== null) {
setOffset({
left: node.offsetLeft,
width: node.offsetWidth,
height: node.offsetHeight
});
}
}, []);
return [offset, ref];
}
И используя в нужном Компонент , например:
const [offset, ref] = useOffset();
Нопроблема, которую я обнаружил, заключается в том, что при первом рендеринге измерения неверны из-за еще не примененных styles, FOUT и так далее.Следующие рендеры будут измерять правильный путь.
Здесь - песочница с воспроизведением.
При первой загрузке страницы или нажатии reload кнопка браузера Codesandbox , красный outline не будет совпадать с h1.title, но будет скрывать и показывать элементы снова через button, что вызывает повторный рендеринг, изменяющий Компонент state, outline идеально соответствует размеру (смещению) измеряемого элемента.
В этом же твите также есть видео, показывающее неправильное и желаемое поведение.
ОБНОВЛЕНИЕ , кажется, происходит только в браузере Firefox .