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

В версии React 16.0 порталы React появились в сентябре 2017 года. Портал React предоставляет способ отрисовки элемента вне иерархии его компонентов, т. е. в отдельном компоненте.

До версии React 16.0 было очень сложно визуализировать дочерний компонент вне иерархии его родительских компонентов. Если мы сделаем это, это нарушит соглашение, согласно которому компонент должен отображаться как новый элемент и следовать иерархии родитель-потомок. В React родительский компонент всегда хочет идти туда, куда идет его дочерний компонент. Вот почему появляется концепция портала React.

ReactDOM.createPortal(child, container)

Здесь первый аргумент (потомок) — это компонент, который может быть элементом, строкой или фрагментом, а второй аргумент (контейнер) — элемент DOM.

Функции

  • Он использует React версии 16 и его официальный API для создания порталов.
  • У него есть запасной вариант для React версии 15.
  • Он переносит свой дочерний компонент на новый портал React, который по умолчанию добавляется к document.body.
  • Он также может быть нацелен на указанный пользователем элемент DOM.
  • Он поддерживает рендеринг на стороне сервера.
  • Он поддерживает возвращаемые массивы (не требуется обертка div)
  • Он использует ‹Portal /› и ‹PortalWithState /›, поэтому нет компромисса между гибкостью и удобством.
  • Это не создает беспорядка в DOM.
  • Он не имеет зависимостей, минималистичный.

Когда использовать?

Общие варианты использования портала React включают в себя:

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

Монтаж

Мы можем установить портал React, используя следующую команду.

  1. $ npm install react-portal — сохранить