Этап 4 из 12 · ≈ 2 ч

Порталы

Полезно знать с Middle

Отрисовка модальных окон и подсказок вне родительского DOM-узла.

createPortal(children, domNode) рисует компонент в другом месте DOM — обычно в конце body, — оставляя его в дереве React.

return createPortal(<div className="modal">{children}</div>, document.body);

Что важно знать

  • Решает проблемы overflow: hidden и z-index у родителей для модальных окон, выпадающих меню и подсказок.
  • События из портала всплывают по дереву React, а не DOM: клик в модальном окне дойдёт до обработчика родительского компонента.
  • Для модальных окон — также управление фокусом и Escape; нативный <dialog> решает многое из коробки.

Критерии освоения

Middle ≈ 2 ч

  • Рендерит модальные окна и подсказки через порталы с управлением фокусом
  • Объясняет всплытие событий из портала по дереву React

Практика. Сделать доступное модальное окно на портале с ловушкой фокуса и закрытием по Escape.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

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

createPortal(jsx, domNode) рендерит содержимое в другое место DOM (обычно в конец body), сохраняя его положение в дереве React. Это нужно модальным окнам, подсказкам, выпадающим меню, чтобы их не обрезал overflow и не перекрывал z-index родителя. События из…

Полный разбор
Как обеспечить работу интерфейса с клавиатуры и управление фокусом?Junior

Все действия должны быть доступны с клавиатуры: Tab — перемещение по интерактивным элементам, Enter и пробел — активация, Esc — закрыть окно, стрелки — внутри составных виджетов. Нативные button, a, input фокусируются сами; tabindex="0" добавляет элемент в…

Полный разбор
Как обрабатывать события в React и передавать колбэки дочерним компонентам?Junior

Обработчик передают функцией: onClick={handleClick} или onClick={() => remove(id)} — не onClick={handleClick()} (это вызов при рендере). Событие — синтетическое объединение над нативным с тем же API: e.preventDefault(), e.stopPropagation(), e.target. Родитель…

Полный разбор
Что такое всплытие и перехват событий и как работает делегирование?Junior

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target…

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

Документация

← Вся карта «React»

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

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

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

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