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

Что такое портал React?

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

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

Зачем использовать порталы React?

Вы можете захотеть использовать порталы React в своем приложении по нескольким причинам. Вот некоторые из них:

  1. Модальные окна: как упоминалось выше, модальные окна являются распространенным вариантом использования порталов React. Отрисовывая модальное содержимое вне иерархии основных компонентов, вы можете гарантировать, что оно появится поверх всего остального содержимого.
  2. Производительность: в некоторых случаях рендеринг контента непосредственно в DOM может быть быстрее, чем его рендеринг через компоненты React. Порталы React позволяют вам воспользоваться этим, отображая определенные элементы вне иерархии основных компонентов.
  3. Разделение проблем. Отрисовывая содержимое вне родительской иерархии компонента, вы можете поддерживать порядок кода вашего приложения и упростить управление им.

Как реализовать порталы React?

Реализация React Portals довольно проста. Вы должны написать очень небольшое количество кода. Все начинается с очень простого шага;

  • Создайте новый элемент-контейнер за пределами корневого div
    Во-первых, вам нужно создать новый элемент, который будет служить контейнером для контента вашего портала. Этот элемент следует добавить рядом с корневым div в файле index.html.
<body>
  <div id="root"></div> // traditional root element provided by react itself
  <div id="portal"></div> // A div created by us outsite root
</body>
  • Визуализировать содержимое портала.
    Затем вам нужно будет преобразовать содержимое портала в новый элемент-контейнер с помощью ReactDOM.createPortal(). Эта функция принимает два аргумента: отображаемое содержимое и целевой элемент контейнера.
import React from 'react';
import ReactDOM from 'react-dom';

const PortalCreator = ({ children }) => {
  const mount = document.getElementById('portal');
  return ReactDOM.createPortal(children, mount);
};

export default PortalCreator;

Теперь этот HOC можно использовать для рендеринга любого компонента в div, который мы создаем за пределами корневого div.

  • Использование компонента портала
    Для использования компонента PortalCreator импортируйте его в любой файл, который вы хотите использовать, а затем передайте нужный компонент этому компоненту портала в качестве дочернего элемента.
<PortalCreator>
  <h1>This will be rendered inside the portal div <h1>
</PortalCreator>

Теперь этот «‹h1›» будет отображаться внутри div с идентификатором «#portal», который существует вне иерархии основного компонента.

Заключение

Порталы React — это мощный инструмент для рендеринга контента за пределами родительской иерархии DOM компонента. Их можно использовать для модальных окон, всплывающих окон, всплывающих подсказок и многого другого. Используя порталы React, вы можете повысить производительность своего приложения и поддерживать порядок в коде.

Фактический учебник с демонстрацией будет доступен в ближайшее время …..

А пока, если вы хотите узнать больше о концепциях кодирования в деталях, обязательно ознакомьтесь с нашим Курсом веб-разработки Full Stack. Удачного кодирования!