Работали ли вы с React Portal и для чего он нужен?

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

Короткий ответ

Что ответить на собеседовании

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

Подробный разбор

Ответ с пояснениями

Порталы в 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", который может находиться вне основного корня приложения.

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку