Вопрос с собеседования · Frontend

Что такое порталы в React и как сделать на них модальное окно?

MiddleReact
Ещё спрашивают так:
  • Что делает createPortal?
Коротко

createPortal(jsx, domNode) рендерит содержимое в другое место DOM (обычно в конец body), сохраняя его положение в дереве React. Это нужно модальным окнам, подсказкам, выпадающим меню, чтобы их не обрезал overflow и не перекрывал z-index родителя. События из портала всплывают по дереву React, а не DOM — родительский onClick их получит. Модальное окно должно перевести фокус внутрь, удерживать его, закрываться по Escape и возвращать фокус на кнопку, которая его открыла; роль dialog и aria-modal.

  • Нативный <dialog> с showModal() решает часть задач сам
  • Контекст и состояние доступны в портале как обычно
  • Блокировать прокрутку фона, пока открыто окно

А ещё Неожиданное всплытие из портала — частая причина «лишних» срабатываний

Подробно

function Modal({ open, onClose, children }) {
  if (!open) return null;
  return createPortal(
    <div role="dialog" aria-modal="true" onKeyDown={e => e.key === "Escape" && onClose()}>
      {children}
    </div>,
    document.body
  );
}

Что хотят услышать

  • Рендер в другой узел DOM при сохранении дерева React.
  • Всплытие по дереву React.
  • Управление фокусом и доступность.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Рендерит в другой узел DOM, сохраняя место в дереве React; события всплывают по дереву React
  • ✗События из портала всплывают по DOM-дереву body и не доходят до родительского компонента React
  • ✗Внутри портала недоступен контекст родителя
  • ✗Портал нужен только для ускорения рендера

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования