Порталы в React: Выходим за пределы.
Привет, друзья! Сегодня я хочу рассказать про довольно интересный инструмент в React - порталы.
Представим такую ситуацию: Вы используете React и сделали модальное окно, повесили его на абсолют и радуетесь. В компанию приходит новый разработчик, ничего не знает о вашей модалке и набрасывает overflow: hidden на родительский контейнер. Итог: модалка не отображается(или отображается криво), ваш код нужно переписывать. Решение есть - порталы.
Что такое порталы и для чего они нужны? Порталы - это механизм, который позволяет рендерить дочерние элементы в DOM-узел, находящийся за пределами DOM-иерархии родительского компонента. Это особенно полезно, когда родительский компонент имеет стили, такие как overflow: hidden или z-index, но вам нужно, чтобы дочерний элемент визуально выходил за рамки своего контейнера, например, для модальных окон, всплывающих карточек и подсказок. Чаще всего, такие элементы стараются переместить ближе к body, чтобы их точно ничего не могло перекрыть.
Прикрепляю ссылку на документацию: https://react.dev/reference/react-dom/createPortal
А что вы думаете насчет использования порталов в React? Поделитесь своим мнением.
Кстати, я ищу работу фронтенд-разработчиком на частичный рабочий день. Если вам интересно, то напишите мне в личные сообщения:)
