🚀 Порталы и модальные окна в React: универсальное решение для вашего UI Привет, друзья! 👋 Сегодня поговорим о порталах в React и их применении для создания универсальных компонентов модальных окон. Это важный инструмент для работы с элементами, которые должны отображаться вне DOM-иерархии родительского компонента. 🔹 Что такое порталы в React? Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится за пределами DOM-иерархии родительского компонента. Создаются с помощью метода ReactDOM.createPortal. Пример:

ReactDOM.createPortal(child, container)

- child — React-элемент, который нужно отобразить. - container — DOM-узел, куда этот элемент будет вставлен. 🔹 Почему это важно для модальных окон? Модальные окна часто должны: 1. Перекрывать всё приложение. 2. Не зависеть от родительских стилей. 3. Быть легко доступными для управления. Порталы позволяют рендерить модальные окна в корневой DOM-узел, например, <div id="modal-root">. 🔹 Создание универсального компонента модального окна Шаг 1. Добавьте корневой элемент в HTML:

<div id="modal-root"></div>

Шаг 2. Создайте компонент Modal:

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};

export default Modal;

Что здесь происходит? 1. Условный рендеринг: если окно закрыто, ничего не возвращается. 2. Портал: модальное окно рендерится в #modal-root. 3. Закрытие по клику: окно закрывается при клике на фон или кнопку. 🔹 Использование компонента Modal Пример в приложении:

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

function App() {
  const [isModalOpen, setModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Открыть модальное окно</button>
      <Modal isOpen={isModalOpen} onClose={() => setModalOpen(false)}>
        <h1>большой привет от ReactJs Daily!</h1>
        <p>Подпишись на канал)</p>
      </Modal>
    </div>
  );
}

export default App;

🔹 Преимущества подхода 1. Изоляция: модальное окно не зависит от стилей родителя. 2. Гибкость: компонент легко переиспользовать. 3. Чистота DOM: модальное окно рендерится в отдельный контейнер, упрощая структуру приложения. 🎯 Заключение Порталы в React — это мощный инструмент для работы с элементами вне стандартной DOM-иерархии. Используйте их, чтобы создавать удобные и универсальные модальные окна, которые будут легко интегрироваться в любое приложение. ReactJs Daily | #begginers