ПОРТАЛ: вымышленный или волшебный дверной проем, который позволяет вам перемещаться в разные места по всей вселенной.
В 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.
Спасибо за прочтение :)