آشنایی با Create Portal در ریکت
گاهی اوقات، نیاز داریم کامپوننتی را خارج از ساختار DOM فعلی رندر کنیم. به‌عنوان مثال:
نمایش مودال‌ها (Modal): مودال‌ها معمولاً باید در بالاترین سطح DOM قرار گیرند تا از تداخل با سایر استایل‌ها و عناصر جلوگیری شود.
نمایش نوتیفیکیشن‌ها: نوتیفیکیشن‌ها نیز بهتر است خارج از ساختار اصلی اپلیکیشن نمایش داده شوند.
رفع محدودیت‌های CSS: در برخی موارد، محدودیت‌های CSS (مانند overflow: hidden) می‌تواند باعث شود که کامپوننت‌ها به درستی نمایش داده نشوند.
متد createPortal از کتابخانه React برای این منظور استفاده می‌شود. سینتکس آن به شکل زیر است:
ReactDOM.createPortal(child, container)child: کامپوننت یا عنصر React که می‌خواهید رندر کنید.
container: یک عنصر DOM که می‌خواهید محتوای child در آن رندر شود.
در اینجا یک مثال ساده برای نمایش یک مودال با استفاده از createPortal آورده شده است:
قدم 1: ایجاد ساختار HTML
ابتدا باید در فایل HTML خود یک عنصر برای قرار دادن محتوای پرتال ایجاد کنید:
<body> <div id="root"></div> <div id="modal-root"></div></body>قدم 2: ساخت کامپوننت Modal
یک کامپوننت برای مودال ایجاد کنید که از createPortal استفاده می‌کند:
import React from "react";import ReactDOM from "react-dom";const Modal = ({ children, onClose }) => { return ReactDOM.createPortal( <div style={styles.overlay}> <div style={styles.modal}> {children} <button onClick={onClose}>بستن</button> </div> </div>, document.getElementById("modal-root") );};const styles = { overlay: { position: "fixed", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0.5)", display: "flex", justifyContent: "center", alignItems: "center", }, modal: { backgroundColor: "white", padding: "20px", borderRadius: "8px", boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)", },};export default Modal;قدم 3: استفاده از Modal در اپلیکیشن
حالا می‌توانیم این کامپوننت را در اپلیکیشن استفاده کنیم:
import React, { useState } from "react";import Modal from "./Modal";const App = () => { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div> <h1>سلام دنیا!</h1> <button onClick={() => setIsModalOpen(true)}>باز کردن مودال</button> {isModalOpen && ( <Modal onClose={() => setIsModalOpen(false)}> <h2>این یک مودال است!</h2> </Modal> )} </div> );};export default App;استفاده از ReactDOM: برای استفاده از createPortal باید مطمئن شوید که ReactDOM را ایمپورت کرده‌اید.
استایل‌دهی: معمولاً برای مودال‌ها نیاز به استایل‌های خاصی مانند position: fixed دارید.
مدیریت ایونت‌ها: رویدادهایی که روی عناصر والد قرار دارند، همچنان روی عناصر داخل پرتال نیز اعمال می‌شوند (به این ویژگی event bubbling می‌گویند).
کامپوننتی که با createPortal رندر می‌شود، از نظر DOM به یک مکان دیگر منتقل می‌شود (در مثال بالا، به #modal-root)، اما از نظر React همچنان به کامپوننت والد خود متصل باقی می‌ماند. به همین دلیل، شما می‌توانید از کامپوننت والد به کامپوننت پرتال‌شده props ارسال کنید.
به عبارت دیگر:
Propها و State والد: همچنان در اختیار کامپوننت پرتال‌شده هستند.
کنترل React: به دلیل ارتباط منطقی کامپوننت‌ها در سلسله‌مراتب React، می‌توانید به سادگی از props برای ارسال داده‌ها یا متدها استفاده کنید.
فرض کنید می‌خواهید اطلاعاتی مانند عنوان یا پیام به مودال ارسال کنید:
<Modal title="پیام مهم" onClose={() => setIsModalOpen(false)}> <p>این یک پیام داخل مودال است.</p></Modal>در کامپوننت Modal می‌توانید این props را دریافت کرده و از آن‌ها استفاده کنید:
const Modal = ({ title, children, onClose }) => { return ReactDOM.createPortal( <div style={styles.overlay}> <div style={styles.modal}> <h1>{title}</h1> {children} <button onClick={onClose}>بستن</button> </div> </div>, document.getElementById("modal-root") );};