Что такое портал в React?

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

Создание портала

Чтобы создать портал, вы можете использовать метод ReactDOM.createPortal. Этот метод принимает два аргумента: элемент, который нужно рендерить, и контейнер, в который вы хотите его поместить. Вот пример:

import ReactDOM from 'react-dom'; 

const MyModal = ({ children, onClose }) => {
  	return ReactDOM.createPortal(
      		<div className="modal">    
        		<button onClick={onClose}>Close</button>      
        		{children}    
      		</div>,    
      		document.getElementById('modal-root') // контейнер в index.html  
   	); 
};

Где использовать порталы

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

Преимущества

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

Понимание порталов в React помогает разработчикам эффективно управлять отображением элементов, не нарушая структуру приложения.