Skip to content

React порталы и компонент Layer

Nikita Elfimov edited this page Aug 18, 2021 · 2 revisions

Зачем нужны и где используются реакт порталы?

Простой пример использования - https://codesandbox.io/s/react-portal-showcase-pvlh0?file=/src/App.tsx

Если вкратце, один из основных кейсов использования - если элементу НЕ нужно наследовать стили родителя (отражено в примере)

Примеры: контекстное меню (как то, которое открывается на ПКМ), модальное окно, поповеры

Что представляет из себя компонент Layer?

Layer содержит в себе доп.логику для работы с элементами отрендеренных с помощью порталов. Например клик снаружи (aka "кликните в любом месте чтобы закрыть"), отрисовка элемента в определенном месте (anchor) и т.п.