Порталы в React позволяют рендерить дочерние компоненты в DOM-узел, который находится вне иерархии родительского компонента. Это полезно, когда нужно вывести элемент поверх других, например, модальные окна, тултипы или всплывающие меню, чтобы избежать проблем с CSS-стилями, z-index или позиционированием.
Работали ли вы с React Portal и для чего он нужен?
Порталы в React позволяют рендерить дочерние компоненты в DOM-узел, который находится вне иерархии родительского компонента.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Порталы в React позволяют рендерить дочерние компоненты в DOM-узел, который находится вне иерархии родительского компонента. Это полезно, когда нужно вывести элемент поверх других, например, модальные окна, тултипы или всплывающие меню, чтобы избежать проблем с CSS-стилями, z-index или позиционированием.
Пример использования портала:
import React from 'react';
import ReactDOM from 'react-dom';
function Modal({ children }) {
return ReactDOM.createPortal(
<div className="modal">
{children}
</div>,
document.getElementById('modal-root')
);
}
Здесь содержимое модального окна будет отрисовано в элемент с id "modal-root", который может находиться вне основного корня приложения.