سلام دوستان 👋 توی این قسمت می‌خوایم ببینیم که Portal توی ری‌اکت چه کاربردهایی داره و چه زمانی پیشنهاد میشه از اون استفاده کنیم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست. بریم که پست امروز رو شروع کنیم.

 

React Portal؟‌ 🤔

Portal (که از این بعد بهش می‌گیم پرتال) یک ویژگی توی ری‌اکت هست که اجازه میده یک المنت رو توی جای دلخواه از DOM رندر کنیم. در حالت عادی یک المنت همون جایی رندر میشه که صدا زده شده. اما گاهی اوقات می‌خوایم اون المنت رو جای دیگه‌ای از صفحه رندر کنیم. برای این کار این ویژگی به کارمون میاد.

پرتال کاربردهای خاص و مهمی داره و معمولاً توسط کامپوننت‌های مُدال (Modal) و Tooltip و Popover استفاده میشه. فرض کنیم یک کامپوننت مُدال نوشتیم و اون رو می‌خوایم توی یک کامپوننت دیگه فراخونی کنیم. اگه کامپوننت والد یک‌سری استایل‌های خاص مثل overflow: hidden داشته باشه و یا طول و عرض اون محدود باشه، کامپوننت مُدال به‌درستی نمایش داده نمیشه. اینجاست که باید کاری کنیم که مُدال به جای دیگه‌ای از DOM منتقل بشه تا به‌راحتی نمایش داده بشه.

 

چه جوری از قابلیت پرتال استفاده کنیم؟

با استفاده از کد زیر می‌تونیم از قابلیت پرتال توی ری‌اکت استفاده کنیم:

import { createPortal } from "react-dom";

createPortal(child, container);

همونطور که می‌بینیم متد createPortal رو داریم از react-dom فراخونی می‌کنیم. این تابع ۲ ورودی می‌گیره. ورودی اول کامپوننتی هست که می‌خوایم رندر کنیم (مثلا مُدال.) در واقع این ورودی هر چیز قابل رندر شدنی رو قبول می‌کنه. مثل المنت‌های JSX و رشته و اعداد. ورودی دوم المنتی هست که می‌خوایم کامپوننت مد نظر ما توش رندر داده بشه. این المنت باید توی DOM وجود داشته باشه.

اگه بخوایم یه مثال ساده بزنیم:

export default function App() {
  const Welcome = <h1>Welcome!</h1>
  const container = document.body;

  return createPortal(Welcome, container);
}

به return خط ۵ دقت کنین. خروجی متد createPortal یک المنت ری‌اکتی یا JSX هست. پس برای اینکه توی صفحه رندر بشه باید توسط کامپوننت ریترن بشه. توی کد بالا، createPortal کامپوننت Welcome رو در انتهای المنت <body> رندر می‌کنه.

با توجه به کد بالا، نکتهٔ مهمی که باید در نظر داشته باشیم اینه که کامپوننت‌های مد نظر ما حتماً لازم نیست توی قسمتی رندر بشن که ری‌اکت داره اونجا رو مدیریت می‌کنه. پس اونها رو می‌تونیم هر جای دلخواهی از DOM رندر کنیم.

 

پس Event Propagation چی میشه؟