شرح صفوف ومحتوى الفقرة
في الوضع المعتاد، ترسم React عناصر HTML الخاصة بالمكون داخل عقدة أبيه المباشر في شجرة المتصفح. غير أن هذا التسلسل يسبب مشكلة بصرية شائعة عندما تحاول بطاقة مقيدة بخاصية overflow: hidden أو transform فتح نافذة حوارية شاملة أو قائمة منبثقة، إذ يقتطع المتصفح أطراف النافذة عند حدود البطاقة الضيقة!
تحل الدالة createPortal(children, domNode) المستوردة من حزمة react-dom هذه المعضلة بنقل الرسم الفيزيائي للعناصر إلى حاوية عليا مثل document.body مع بقاء المكون في موضعه المنطقي الكامل داخل شجرة React:
HTML
import { createPortal } from 'react-dom';
function FloatingNotice({ open, onClose }) {
if (!open) return null;
return createPortal(
<div role="status">
Saved! <button onClick={onClose}>OK</button>
</div>,
document.body
);
}