Що таке портал у React

Портал — це механізм у React, який дозволяє рендерити компонент поза основним деревом DOM, залишаючись при цьому частиною ієрархії React.

Це корисно, коли потрібно відобразити модальні вікна, підказки, випадні списки, які не повинні бути вкладеними в стилі батьківських елементів (наприклад, overflow: hidden, z-index, transform).

Як створити Портал?

React надає спеціальний метод:

tsx

ReactDOM.createPortal(children, container)

children — елемент для рендерингу
container — DOM елемент, куди JSX буде поміщено поза поточним деревом

Приклад використання Порталу

jsx

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root') // поза коренем додатку
  );
}

HTML

html

<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- портал рендериться тут -->
</body>

Тепер компонент Modal не буде обгорнутий у стилі батьківського елемента #root, але React все ще буде керувати його станом і життєвим циклом.

Де використовуються Портали?

Модальні вікна
Підказки
Випадні списки
Сповіщення
Бокові панелі

Переваги

Вихід за межі обмежень CSS контейнера
Відсутність конфліктів з z-index, overflow, position
Додаток React залишається керованим (обробники, стан, рефери працюють як зазвичай)

Важливо пам'ятати

Портали не створюють новий контекст React, вони використовують той самий, що й батьківський
Можуть порушити макет, якщо глобальні стилі не враховані

Висновок:

Портал — це потужний інструмент React, коли ви хочете візуально вийти за межі батьківського DOM, зберігаючи керування React. Використовуйте їх для модалів, підказок та будь-яких елементів інтерфейсу, які повинні бути "наверху" всього.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке портал у React

#Як створити Портал?

#Приклад використання Порталу

#Де використовуються Портали?

#Переваги