Я наткнулся на этот пример в документации «Реакция uselayouteffect»: < /p>
import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';
export default function Tooltip({ children, targetRect }) {
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height);
console.log('Measured tooltip height: ' + height);
}, []);
let tooltipX = 0;
let tooltipY = 0;
if (targetRect !== null) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
// It doesn't fit above, so place below.
tooltipY = targetRect.bottom;
}
}
return createPortal(
{children}
,
document.body
);
}
< /code>
Зачем хранить высоту в состоянии (Tooltipheight), когда вы можете просто получить доступ к ref.current.getBoundingClientRect (). Высота непосредственно с регулярным использованием? Это устранило бы необходимость в UselayOuteffect. Использование состояния и uselayoutefcect здесь по практическим причинам, или это, например, цели?
Подробнее здесь: https://stackoverflow.com/questions/795 ... clientrect
