Что такое Portal в React

1️⃣ Как кратко ответить

Portal в React позволяет рендерить дочерние элементы в DOM-узел, который находится вне иерархии родительского компонента. Это полезно для создания модальных окон, всплывающих подсказок и других элементов, которые должны быть визуально отделены от остальной части приложения.

2️⃣ Подробное объяснение темы

В React компоненты обычно рендерятся в пределах иерархии DOM-дерева, определенной их родительскими компонентами. Однако бывают случаи, когда необходимо рендерить компонент в другом месте DOM-дерева, например, для создания модальных окон, всплывающих подсказок или других элементов, которые должны быть визуально отделены от остальной части приложения. В таких случаях используется Portal.

Зачем нужны Portals

Portals позволяют рендерить компоненты в другой части DOM, не нарушая иерархию компонентов в React. Это особенно полезно, когда необходимо избежать проблем с CSS, такими как overflow: hidden или z-index, которые могут ограничивать видимость элементов, если они рендерятся в пределах текущего контекста.

Как работают Portals

Portals создаются с помощью функции ReactDOM.createPortal. Эта функция принимает два аргумента: React-элемент, который нужно рендерить, и DOM-узел, в который этот элемент будет рендериться.

Пример использования Portals

Рассмотрим пример, где мы создаем модальное окно с использованием Portal.

import React from 'react';
import ReactDOM from 'react-dom';
​
// Компонент Modal, который будет рендериться через Portal
function Modal({ children }) {
  // Находим DOM-узел, в который будет рендериться модальное окно
  const modalRoot = document.getElementById('modal-root');
​
  // Используем ReactDOM.createPortal для рендеринга children в modalRoot
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    modalRoot
  );
}
​
// Основной компонент приложения
function App() {
  return (
    <div className="app">
      <h1>Пример использования Portals</h1>
      {/* Модальное окно будет рендериться вне иерархии компонента App */}
      <Modal>
        <h2>Это модальное окно</h2>
        <p>Содержимое модального окна.</p>
      </Modal>
    </div>
  );
}
​
export default App;

Объяснение кода

1. Импорт библиотек: Импортируем React и ReactDOM, которые необходимы для создания компонентов и работы с DOM.

2. Компонент Modal: Это функциональный компонент, который принимает children — содержимое, которое будет отображаться в модальном окне.

3. DOM-узел modalRoot: Используем document.getElementById('modal-root') для получения ссылки на DOM-узел, в который будет рендериться модальное окно. Этот узел должен существовать в HTML-документе.

4. ReactDOM.createPortal: Используем эту функцию для рендеринга children в modalRoot. Это позволяет модальному окну быть частью DOM-дерева вне иерархии компонента App.

5. Компонент App: Основной компонент приложения, который рендерит заголовок и модальное окно. Модальное окно визуально отделено от остальной части приложения благодаря использованию Portal.

Применение Portals

Portals часто используются для создания UI-элементов, которые должны быть визуально отделены от остальной части приложения, таких как:

• Модальные окна
• Всплывающие подсказки
• Контекстные меню

Portals обеспечивают гибкость в управлении DOM-структурой, сохраняя при этом логику и состояние компонентов в React.