ПОРТАЛ: вымышленный или волшебный дверной проем, который позволяет вам перемещаться в разные места по всей вселенной.

В React v16.0 появилась аналогичная концепция портала, которая позволяет переносить часть пользовательского интерфейса в другие места в дереве DOM. (даже вне родительской иерархии). Вы помещаете свой компонент в одно место. После рендеринга он оказывается где-то еще в фактической модели DOM. Необычно?

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

ReactDOM.createPortal(child, container)

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

Обычно все, что вы визуализируете, обычно добавляется внутри родительского компонента в иерархию дерева DOM. Но теперь вы можете отображать его в любом месте дерева DOM через React порталы ( нарушая правила иерархии компонентов ).

Допустим, вы хотите телепортировать компонент во внутренний div (id - modal-root).

Давайте возьмем модальный компонент, в котором вы создаете портал, чтобы телепортировать его дочерние элементы в указанный выше div (с идентификатором # modal-root). .

Процессы, задействованные при установке модального компонента

[Снимок кода прикреплен]

Шаг 1: вызывается конструктор. Внутри него мы создаем новый div (this.e1), который будет действовать как наша основная цель телепорта.

Шаг 2: вызывается функция render (). Мы создаем Портал, описывающий, что мы хотим телепортировать дочерние элементы Модального компонента в div (this.e1) [Пункт назначения нашего телепорта] .

Шаг 3. Затем вызывается функция componentDidMount (). div (this.e1) теперь прикреплен или добавлен к модальному корневому div (последнее место, где мы хотели быть детьми)

(** Просмотрите комментарии в коде)

Увеличьте, пожалуйста: P

Теперь попробуйте отобразить Модальный компонент внутри другого компонента:

Поскольку у вас есть Портал внутри Модального, компонент Дочерний не будет отображаться в следующей иерархии, но он будет телепортирован в «modal-root» div в Фактическом дереве DOM . Новую фактическую иерархию DOM можно проверить, проверив дерево DOM с помощью Chrome.

Какая от этого польза?

Создание модальных окон / подсказок. (Особенно, если модальное окно или всплывающая подсказка вырвутся из родительского div)

Но действительно ли вам нужны Порталы для этого ? Будет сложно реализовать модальное окно без Порталов в случае когда ваш модальный отображается внутри родительского div и родительский div имеет «переполнение: скрыто ». В этом случае модальный компонент будет обрезан, если он пересечет размеры родительского блока. Это что-то, чего вы не хотите.

Что особенного?

Телепорт (или передача) на самом деле происходит в фактическом дереве DOM, а не в дереве реакции. React Tree по-прежнему будет содержать модальное окно, в котором вы его визуализировали.

* Важно: Это означает, что, хотя портал может находиться где угодно в дереве Actual DOM, во всех остальных отношениях он ведет себя как обычный дочерний элемент React. Такие функции, как context и this, работают точно так же независимо от того, является ли дочерний портал, поскольку модальный и его дочерние элементы все еще существуют в React Virtual DOM tree независимо от его положения в Actual дереве DOM.

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

Это все с React Portals.

Спасибо за прочтение :)