ایجاد Modals در React: راهنمای جامع برای باز کردن عناصر در Modals

Summarize this content to 400 words in Persian Lang
معرفیمدال ها بخش مهمی از برنامه های کاربردی وب هستند و راهی برای نمایش محتوا در صفحه فعلی بدون پیمایش فراهم می کنند. این راهنما شما را از طریق مراحل ایجاد یک مدال در React راهنمایی می کند، از جمله نحوه استفاده از React Portal برای رندر کردن مدال ها و مدیریت نمایان بودن آنها با حالت. در پایان این آموزش، می توانید مدال هایی را پیاده سازی کنید که می توانند عناصر مختلف را به صورت پویا باز کنند.

پیش نیازهاقبل از اینکه وارد کد شویم، مطمئن شوید که درک اولیه ای از React و اجزای عملکردی دارید. آشنایی با هوک ها (useState، useEffect) مفید خواهد بود.

مرحله 1: راه اندازی پروژهابتدا یک پروژه React جدید ایجاد کنید یا به پروژه موجود خود بروید:

npx create-react-app react-modal-tutorial
cd react-modal-tutorial
npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: ایجاد مؤلفه Modalیک فایل جدید ModalPortal.js ایجاد کنید و کد زیر را اضافه کنید:

import React, { useEffect } from ‘react’;
import ReactDOM from ‘react-dom’;

const ModalPortal = ({ open, children }) => {
useEffect(() => {
const rootElement = document.body;
if (open) {
rootElement.classList.add(‘overlay’);
} else {
rootElement.classList.remove(‘overlay’);
}
}, [open]);

if (!open) return null;

return ReactDOM.createPortal(
{children},
document.body
);
};

export default ModalPortal;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: مدل دادن به Modalدر index.css یا یک فایل CSS جداگانه، سبک های زیر را اضافه کنید:

.modalContent {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
width: 100%;
max-width: 500px;
z-index: 300;
overflow-y: auto;
overflow-x: hidden;
}

@media (max-width: 550px) {
.modalContent {
left: 15px;
right: 15px;
}
}

.overlay {
overflow: hidden;
}

@screen maxLg {
.overlay {
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
position: fixed;
}
.overlay::before {
content: “”;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}

.overlay:before {
content: “”;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 200;
backdrop-blur: 6px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: پیاده سازی Modal در کامپوننت شمایک کامپوننت، App.js ایجاد کنید و از ModalPortal برای باز کردن یک مدال با مقداری محتوا استفاده کنید:

import React, { useState } from ‘react’;
import ModalPortal from ‘./ModalPortal’;

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

const handleOpenModal = () => setIsModalOpen(true);
const handleCloseModal = () => setIsModalOpen(false);

return (

Open Modal

Modal Title
This is the modal content.
Close

);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5: رندر دینامیک عناصر در مدالبرای رندر کردن عناصر مختلف به صورت پویا در مودال، می‌توانید محتوا را در کودکی به مؤلفه ModalPortal منتقل کنید:

import React, { useState } from ‘react’;
import ModalPortal from ‘./ModalPortal’;

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

const handleOpenModal = (content) => {
setModalContent(content);
setIsModalOpen(true);
};
const handleCloseModal = () => setIsModalOpen(false);

return (

handleOpenModal(Content 1)}>Open Modal with Content 1
handleOpenModal(Content 2)}>Open Modal with Content 2

Modal Title
{modalContent}
Close

);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجهدر این آموزش نحوه ایجاد یک مودال در React با استفاده از React Portal و مدیریت وضعیت آن با قلاب ها را توضیح داده ایم. ما همچنین یاد گرفتیم که چگونه عناصر مختلف را به صورت پویا در مدال رندر کنیم. با استفاده از این تکنیک ها، می توانید تجربه کاربری اپلیکیشن وب خود را با ترکیب مدال های تعاملی و پویا افزایش دهید. کد نویسی مبارک!

منابع اضافی

1. React Documentation
2. ترفندهای CSS برای Modals
3. React Portal

npx create-react-app react-modal-tutorial
cd react-modal-tutorial
npm start

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const ModalPortal = ({ open, children }) => {
  useEffect(() => {
    const rootElement = document.body;
    if (open) {
      rootElement.classList.add('overlay');
    } else {
      rootElement.classList.remove('overlay');
    }
  }, [open]);

  if (!open) return null;

  return ReactDOM.createPortal(
    
{children}
,
    document.body
  );
};

export default ModalPortal;

.modalContent {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 100%;
  max-width: 500px;
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 550px) {
  .modalContent {
    left: 15px;
    right: 15px;
  }
}

.overlay {
  overflow: hidden;
}

@screen maxLg {
  .overlay {
    transition: all 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    position: fixed;
  }
  .overlay::before {
    content: "";
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.overlay:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  backdrop-blur: 6px;
}

import React, { useState } from 'react';
import ModalPortal from './ModalPortal';

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

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    

      Open Modal
      
        

          


فهرست مطالب
Toggle

Modal Title
          
This is the modal content.
          Close
        
      
    
  );
};

export default App;

import React, { useState } from 'react';
import ModalPortal from './ModalPortal';

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

  const handleOpenModal = (content) => {
    setModalContent(content);
    setIsModalOpen(true);
  };
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    

       handleOpenModal(
Content 1
)}>Open Modal with Content 1
       handleOpenModal(
Content 2
)}>Open Modal with Content 2
      
        

          
Modal Title
          {modalContent}
          Close
        

      
    
  );
};

export default App;