React V16 дал нам удивительные функции, такие как новые типы возвращаемых данных (фрагменты и строки), улучшенная обработка ошибок, порталы и т. Д. В этой статье я собираюсь объяснить, что такое React Portal, чем он отличается от обычного компонента React и где реагируют порталы. используются в реальных приложениях.
Что такое React Portal?
Как правило, React отображает компонент как дочерний по отношению к родителю, в котором он используется. Принимая во внимание, что порталы в React дают разработчику преимущество в добавлении компонента вне текущей иерархии DOM, поддерживая восходящую цепочку событий и управление состоянием.
Традиционный компонент
Вышеупомянутый компонент реакции при отображении в браузере иерархия DOM будет такой:
Компонент портала
Вышеупомянутый компонент реакции, который использует портал для рендеринга дочерних элементов, выглядит в иерархии DOM следующим образом:
Как создаются порталы
Реактивные порталы создаются с помощью метода createPortal ReactDOM.
ReactDOM.createPortal(children, rootNode);
Порталы React используются в определенных сценариях реального мира, таких как создание компонентов для модальных всплывающих окон или всплывающих сообщений.
Скоро: создание универсального модального компонента с помощью React Portals.
Примеры кода, использованные в этой статье, можно скачать здесь.
