React Academy · Урок

Что такое React Portals

Разберитесь в API createPortal и узнайте, зачем бывает полезно отображать содержимое за пределами корневого div

«Что такое React Portals» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

На этом уроке Вы узнаете, что такое порталы React, почему бывает полезно выполнять отрисовку за пределами родительского дерева DOM и как использовать API createPortal.

Обычная иерархия DOM в React

По умолчанию каждый компонент отрисовывается внутри узла DOM своего родителя. Всё приложение React обычно находится внутри одного `

`. Это работает хорошо, пока Вам не понадобится, чтобы модальное окно, всплывающая подсказка или раскрывающийся список вышли за пределы родителя с `overflow: hidden`.

Что такое портал

**Портал** позволяет отрисовать результат работы компонента в другом узле DOM — существующем за пределами корня React. Дерево React-компонентов не изменяется; меняется только положение в DOM.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Зачем нужны порталы

Такие свойства CSS, как `overflow: hidden`, контексты наложения `z-index` и `transform` у родителя, могут обрезать или скрывать дочерние элементы. Порталы обходят эти ограничения, прикрепляя отрисованный результат к другому узлу DOM.

Всплытие событий по-прежнему работает

Хотя узел DOM портала находится за пределами родителя, **события React по-прежнему всплывают** по дереву компонентов React, а не по дереву DOM. Нажатие внутри модального окна портала всплывёт к его родителю в React.

Создание целевого узла портала

Вы можете создать портал в любой существующий узел DOM. Распространённый подход — добавить отдельный `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Жизненный цикл портала связан с родителем в React

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

Контекст работает через порталы

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

Использование createPortal с состоянием

Управляйте видимостью портала с помощью переменной состояния. Переключайте её кнопкой: содержимое портала появится в document.body, а кнопка останется в обычном положении в DOM.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Серверная отрисовка и порталы

Для порталов требуется существующий узел DOM, поэтому они всегда работают на стороне клиента. В Next.js и других конфигурациях SSR убедитесь, что код отрисовки портала выполняется только в браузере, используя `useEffect` или проверку состояния монтирования.

Быстрая проверка

Порталы React отрисовывают содержимое в другом узле DOM. На какой аспект дерева компонентов React это влияет?

Итоги

Порталы позволяют отрисовывать результат работы React в любом узле DOM с помощью createPortal(). Дерево React, контекст и всплытие событий не изменяются. Используйте порталы, чтобы обходить ограничения overflow и z-index для модальных окон и всплывающих подсказок.

Следующий урок: **Создание компонента модального окна с помощью порталов** — Вы создадите полностью переиспользуемое модальное окно, которое отрисовывается через портал в document.body, с управлением состоянием открытия и закрытия.

Часто задаваемые вопросы

Урок «Что такое React Portals» бесплатный?

Да — полный текст урока «Что такое React Portals» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Что такое React Portals»?

Разберитесь в API createPortal и узнайте, зачем бывает полезно отображать содержимое за пределами корневого div Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Что такое React Portals»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy