ازم پرسید راجب به Portal در React چیزی میدونی؟؟


تو نگاه اول من بلد نبودم و نمیدونستم به چی اشاره داره ، نتونستم جوابش رو بدم ، بعد از سرچ کامل فهمیدم اینجا با شما به اشتراک میزارم

در واقع تا قبل از اینکه React Portal رو بشناسم، فکر می‌کردم بعضی باگ‌های UI طبیعی هستن!

- باگ: Modal زیر بعضی elementها می‌رفت
- باگ: Dropdown داخل parent بریده می‌شد
- باگ: Tooltip درست نمایش داده نمی‌شد
- باگ: z-index بهم میریخت و درست کار نمیکرد


ابزار Portal بهت اجازه میده:
یک component رو از نظر DOM در جای دیگری render کنی،
بدون اینکه ساختار React component tree به هم بخوره.

یعنی چی؟
یعنی مثلاً Modal هنوز داخل همون component مدیریت میشه،
اما در DOM مستقیماً داخل document.body render میشه.

خب نتیجه اش چی میشه؟؟

مثلا فرض کن یک مودال رو داری داخل یک بخش خاص رندر میکنی که به پرنتش overflow-hide رو ست کردی و خب این قطعا روی فرزندان اون پرنت تاثیر میزاره ، اگر مودال رو بدون کمک Portal رندر کنیم به مشکل های دیزاینی میخوریم ، ولی با کمک Portal انگاری مودال داخل اون رندر نشده و اون مشکل overflow-hide رو نداره و همه چیز درست نمایش داده میشه ، به همین سادگی؛


اگر تا امروز برای حل مشکلات UI فقط z-index رو تا 999999 بالا می‌بردی،
احتمالاً وقتشه Portal رو وارد پروژه‌هات کنی

رفرنس:
https://react.dev/reference/react-dom/createPortal

@DevTwitter | <Abolfazl Javadinia/>