شرح صفوف ومحتوى الفقرة
تتيح مراجع DOM استدعاء دوال التخطيط والتمرير القياسية على أي حاوية؛ فدالة scrollIntoView({ behavior: "smooth" }) تمرر العنصر بسلاسة إلى مجال الرؤية، ودالة getBoundingClientRect() تقيس العرض والارتفاع الفعليين بالبكسل بعد تطبيق قواعد CSS.
وعند التعامل مع قائمة ديناميكية متغيرة الطول — حيث لا يجوز استدعاء useRef داخل حلقة map() — نمرر دالة مرجعية ردّية (Ref Callback) تخزن العقد النشطة في كائن Map واحد داخل مرجع الأب.
HTML
const cardRef = useRef(null);
const [metrics, setMetrics] = useState('Not measured');
function handleMeasure() {
const rect = cardRef.current.getBoundingClientRect();
const w = Math.round(rect.width);
const h = Math.round(rect.height);
setMetrics(w + 'x' + h + ' px');
}