React Portal: جعبه ابزار خود را فراتر از حفاری پایه گسترش دهید

مولفه‌های React اقدامات خوب را تشویق می‌کنند، اما می‌توانند بسیار محدودکننده باشند. نحوه شکستن قالب را یاد بگیرید.

نکات کلیدی

React Portal به شما این امکان را می دهد که محتوای یک مؤلفه را خارج از سلسله مراتب مؤلفه اصلی آن رندر کنید و آن را برای عناصر UI مانند modals و overlay ها مفید می کند.
پورتال ها را می توان در سناریوهای مختلفی مانند مدال ها، ادغام های شخص ثالث، منوهای زمینه و نکات ابزار مورد استفاده قرار داد که امکان رندرینگ انعطاف پذیر در مکان های مختلف DOM را فراهم می کند.
با استفاده از React Portal، می‌توانید نگرانی‌های UI را از درخت مؤلفه اصلی جدا کنید، قابلیت نگهداری کد را افزایش دهید و به راحتی شاخص z مؤلفه‌ها را برای لایه‌بندی و چیدمان عناصر UI کنترل کنید.

برنامه های کاربردی وب مدرن به رابط هایی نیاز دارند که دارای عناصری مانند مدال ها و نکات ابزار باشد. اما این مؤلفه‌های رابط کاربری ممکن است همیشه به خوبی با ساختار مؤلفه موجود ادغام نشوند.

React راه حلی برای این مشکل از طریق قابلیتی به نام Portals ارائه می دهد.

React Portal چیست؟

React Portal راهی برای ارائه محتوای یک مؤلفه خارج از سلسله مراتب مؤلفه اصلی آن ارائه می دهد. به عبارت دیگر، آنها به شما این امکان را می دهند که خروجی یک جزء را در یک عنصر DOM متفاوت که فرزند جزء فعلی نیست، ارائه دهید.

این ویژگی زمانی مفید است که با اجزای UI که نیاز به رندر در سطح بالاتری در DOM دارند، مانند modals یا overlay ها، سروکار دارید.

موارد استفاده برای React Portal

React Portal در سناریوهای مختلف مفید است:

مدال ها و روکش ها. هنگامی که نیاز به نمایش دیالوگ های مدال یا همپوشانی دارید، آنها را در سطح بالای DOM رندر کنید. این تضمین می کند که سبک یا طرح والدین آنها آنها را محدود نمی کند.
ادغام های شخص ثالث هنگام ادغام کتابخانه های شخص ثالث که رندر در مکان های خاص DOM را پیش بینی می کنند.
منوهای زمینه ایجاد منوهای زمینه‌ای که به تعاملات کاربر پاسخ می‌دهند، که باید آنها را نسبت به viewport یا یک عنصر DOM خاص قرار دهید.
راهنمای ابزار و پاپاور. هنگام رندر کردن راهنمای ابزار یا پاپاورهایی که باید در بالای سایر مؤلفه ها ظاهر شوند، صرف نظر از موقعیت آنها در درخت مؤلفه.

مطلب مرتبط: چگونه حلقه های جاوا اسکریپت را بشکنیم و چرا ممکن است به آن نیاز داشته باشیم

پورتال های واکنش چگونه کار می کنند

به طور سنتی، هنگامی که یک کامپوننت را در React رندر می‌کنید، خروجی آن را به گره DOM مولفه والد متصل می‌کنید. این برای اکثر سناریوها به خوبی کار می کند، اما زمانی که نیاز به ارائه محتوا در خارج از سلسله مراتب والدین دارید، محدود می شود.

فرض کنید در حال ایجاد یک دیالوگ مودال هستید. به‌طور پیش‌فرض، محتوای modal را در گره DOM مؤلفه والد قرار می‌دهید.

این می تواند منجر به تضادهای سبک و سایر رفتارهای ناخواسته شود زیرا محتوای مدال سبک ها و محدودیت های اجزای اصلی آن را به ارث می برد.

React Portals این محدودیت را با اجازه دادن به شما برای تعیین یک عنصر DOM هدف که در آن خروجی یک جزء باید ارائه شود، برطرف می کند.

این بدان معناست که می‌توانید هر عنصر UI را خارج از سلسله مراتب DOM والد ارائه دهید، و از محدودیت‌های سبک‌ها و طرح‌بندی والدین رها شوید.

نحوه استفاده از React Portal

Modal ها مثال کاملی از زمانی است که شما ممکن است از React Portal استفاده کنید. این کد نمونه روش را توضیح می دهد.

یک برنامه Basic React را تنظیم کنید

قبل از ایجاد یک پورتال، مطمئن شوید که یک برنامه اصلی React را راه اندازی کرده اید. می‌توانید از ابزارهایی مانند Create React App برای ساخت سریع یک پروژه استفاده کنید.

یک پورتال برای Modals ایجاد کنید

برای ایجاد پورتال، از تابع ReactDOM.createPortal() استفاده کنید. دو آرگومان نیاز دارد: محتوایی که می‌خواهید رندر کنید، و ارجاع به گره DOM برای رندر کردن آن.

در این مثال، مؤلفه Modal فرزندان خود را با استفاده از یک پورتال رندر می کند. محتوا در عنصر DOM با شناسه “ریشه” ظاهر می شود.

// Modal.js
import ReactDOM from "react-dom";

const Modal = ({ children }) => {
  const modalRoot = document.getElementById("root");
  return ReactDOM.createPortal(children, modalRoot);
};

export default Modal;

شما می توانید محتویات یک Modal خاص را در یک جزء خاص تعریف کنید. به عنوان مثال، این مؤلفه ModalContent شامل یک پاراگراف و یک دکمه Close است:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
  <div className="modal">
    <div className="modal-content">
      <p>This is a modal content.</p>
      <button onClick={onClose}>Close</button>
    </div>
  </div>
);

export default ModalContent;

سپس می توانید Modal را با کلیک روی دکمه تعریف شده در App.js باز کنید:

// Usage in App component
import { useState } from "react";
import Modal from "./Modal";
import ModalContent from "./ModalContent";
import "./App.css";

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    <div>
      <button onClick={toggleModal}>Open Modal</button>
      {isModalOpen && (
        <Modal>
          <ModalContent onClose={toggleModal} />
        </Modal>
      )}
    </div>
  );
};

export default App;

در این مثال، مؤلفه Modal محتوای خود را با استفاده از یک پورتال، جدا از سلسله مراتب مؤلفه اصلی، ارائه می‌کند.

مطلب مرتبط: الگوی طراحی دکوراتور چیست؟

نمونه های دنیای واقعی

React Portal ها در موقعیت های مختلف روزمره مفید هستند.

سیستم اعلان: هنگام ایجاد یک سیستم اعلان، اغلب می خواهید پیام هایی در بالای صفحه نمایش داده شود، مهم نیست که جزء فعلی کجا باشد.
منوی زمینه: منوهای زمینه باید نزدیک به جایی که کاربر کلیک می کند ظاهر شود، صرف نظر از اینکه کجا در سلسله مراتب DOM است.
ادغام شخص ثالث: کتابخانه های شخص ثالث اغلب نیاز به هدف قرار دادن بخش های دلخواه DOM دارند.

بهترین روش ها برای استفاده از پورتال

برای استفاده حداکثری از React Portal، نکات زیر را دنبال کنید:

موارد مناسب را انتخاب کنید: پورتال ها انعطاف پذیر هستند، اما همه چیز به آنها نیاز ندارد. زمانی که رندر معمولی باعث ایجاد مشکل یا درگیری می شود از پورتال استفاده کنید.
محتوای پورتال را جدا نگه دارید: هنگامی که محتوا را از طریق پورتال ها ارائه می کنید، مطمئن شوید که خود شامل است. نباید به سبک یا زمینه والدین متکی باشد.
مدیریت رویدادها و اقدامات: در پورتال ها، رویدادها به دلیل محتوای جدا شده اندکی متفاوت عمل می کنند. انتشار رویداد و اقدامات را به درستی مدیریت کنید.

مزایای پورتال های React

React Portal چندین مزیت را ارائه می دهد که می تواند توسعه رابط های کاربری پیچیده را افزایش دهد. آنها:

به جداسازی نگرانی‌های UI از درخت مؤلفه اصلی کمک کنید و قابلیت نگهداری و خوانایی کد را بهبود بخشید.
برای اجزایی که باید خارج از مؤلفه اصلی خود نمایش داده شوند، انعطاف‌پذیری ارائه دهید.
ایجاد مدال ها و روکش هایی که از بقیه UI جدا هستند را آسان کنید.
به شما این امکان را می دهد که به راحتی z-index اجزا را کنترل کنید و اطمینان حاصل کنید که می توانید عناصر UI خود را به طور مرتب لایه بندی کرده و روی هم قرار دهید.

مطلب مرتبط: نحوه ویرایش صفحات وب در سافاری با استفاده از Inspect Element

مشکلات و ملاحظات بالقوه

در حالی که React Portal مفید است، این موارد را در نظر داشته باشید:

مشکلات CSS: پورتال ها می توانند رفتار غیرمنتظره ای در سبک CSS ایجاد کنند زیرا محتوا را خارج از اجزای اصلی قرار می دهند. از سبک های جهانی استفاده کنید یا محدوده CSS را با دقت مدیریت کنید.
دسترس‌پذیری: وقتی از پورتال‌ها برای ارائه محتوا استفاده می‌کنید، به یاد داشته باشید که ویژگی‌های دسترسی مانند پیمایش صفحه کلید و سازگاری با صفحه‌خوان را دست نخورده نگه دارید.
رندر سمت سرور: پورتال ها ممکن است به خوبی با رندر سمت سرور (SSR) هماهنگ نباشند. اثرات و محدودیت های استفاده از پورتال ها در تنظیمات SSR را درک کنید.

پیشبرد رابط کاربری فراتر از حد معمول

React Portal راه حلی قوی برای مدیریت موقعیت‌های پیچیده رابط کاربری ارائه می‌کند که نیاز به محتوا دارند تا فراتر از محدودیت‌های اجزای اصلی ظاهر شوند.

با درک پورتال‌ها و استفاده از بهترین شیوه‌ها، می‌توانید رابط‌های کاربری ایجاد کنید که سازگارتر و نگهداری آسان‌تر باشد، در حالی که از مشکلات جلوگیری می‌شود.

چه در حال ساخت مدال باشید یا کتابخانه های شخص ثالث، React Portal پاسخی قدرتمند برای رفع نیازهای درخواستی UI ارائه می دهد.