Компоненты React поощряют хорошие практики, но они могут быть слишком ограничительными. Узнайте, как сломать шаблон.

Ключевые выводы

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

Современным веб-приложениям нужны интерфейсы, в которых есть такие элементы, как модальные окна и всплывающие подсказки. Но эти компоненты пользовательского интерфейса не всегда могут хорошо интегрироваться с существующей структурой компонентов.

instagram viewer

React предлагает решение этой проблемы с помощью функции под названием «Порталы».

Что такое React-порталы?

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

Эта функция удобна при работе с компонентами пользовательского интерфейса, которые необходимо отображать на более высоком уровне в DOM, например с модальными окнами или наложениями.

Использование порталов React

Порталы React пригодятся в различных сценариях:

  • Модальные окна и наложения. Если вам нужно отобразить модальные диалоги или наложения, визуализируйте их на верхнем уровне DOM. Это гарантирует, что стили или макет их родительских элементов не ограничивают их.
  • Сторонние интеграции. При интеграции сторонних библиотек, которые предусматривают рендеринг в определенных местах DOM.
  • Контекстные меню. Создание контекстных меню, реагирующих на действия пользователя, которые необходимо расположить относительно области просмотра или определенного элемента DOM.
  • Подсказки и всплывающие окна. При отрисовке всплывающих подсказок или всплывающих окон, которые должны появляться поверх других компонентов, независимо от их положения в дереве компонентов.

Как работают порталы React

Традиционно, когда вы визуализируете компонент в React, вы прикрепляете его выходные данные к узлу DOM родительского компонента. Это хорошо работает для большинства сценариев, но становится ограниченным, когда вам нужно визуализировать контент вне родительской иерархии.

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

Это может привести к конфликтам стилей и другому непреднамеренному поведению, поскольку содержимое модального окна наследует стили и ограничения его родительских компонентов.

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

Это означает, что вы можете визуализировать любой элемент пользовательского интерфейса за пределами родительской иерархии DOM, освобождаясь от ограничений родительских стилей и макета.

Как использовать порталы React

Модальные окна — прекрасный пример того, когда вы можете использовать порталы React. Этот пример кода объясняет процедуру.

Настройка базового приложения React

Прежде чем создавать портал, убедитесь, что у вас настроено базовое приложение React. Вы можете использовать такие инструменты, как Create React App быстро реализовать проект.

Создайте портал для модальных окон

Для создания портала используйте ReactDOM.createPortal() функция. Он принимает два аргумента: контент, который вы хотите отобразить, и ссылку на узел DOM, в котором он будет отображаться.

В этом примере модальный компонент отображает свои дочерние элементы с помощью портала. Содержимое появится в элементе DOM с идентификатором «root».

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Вы можете определить содержимое определенного модального окна в определенном компоненте. Например, этот компонент ModalContent содержит абзац и Закрывать кнопка:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Затем вы можете открыть модальное окно нажатием кнопки, определенной в App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

В этом примере модальный компонент отображает свое содержимое с помощью портала, отделенного от иерархии основного компонента.

Реальные примеры

React Portals полезны в различных повседневных ситуациях.

  • Система уведомлений: Когда создание системы уведомлений, вам часто нужны сообщения вверху экрана, независимо от того, где находится текущий компонент.
  • Контекстное меню. Контекстные меню должны появляться рядом с тем местом, где пользователь щелкает мышью, независимо от того, где оно находится в иерархии DOM.
  • Сторонняя интеграция. Сторонним библиотекам часто приходится ориентироваться на произвольные части DOM.

Лучшие практики использования портала

Чтобы получить максимальную отдачу от порталов React, следуйте этим советам:

  • Выбирайте правильные случаи: Порталы гибки, но не всем они нужны. Используйте порталы, когда регулярный рендеринг вызывает проблемы или конфликты.
  • Храните содержимое портала отдельно. При отображении содержимого через порталы убедитесь, что оно автономно. Он не должен полагаться на родительские стили или контекст.
  • Управляйте событиями и действиями. На порталах события работают немного по-другому из-за отдельного контента. Правильно обрабатывайте распространение событий и действия.

Преимущества React-порталов

Порталы React предлагают несколько преимуществ, которые могут улучшить разработку сложных пользовательских интерфейсов. Они:

  • Помогите отделить проблемы пользовательского интерфейса от основного дерева компонентов, улучшив удобство обслуживания и читаемость кода.
  • Обеспечьте гибкость для компонентов, которые должны отображаться за пределами родительского компонента.
  • Упростите создание модальных окон и наложений, отдельных от остального пользовательского интерфейса.
  • Позвольте вам легко управлять z-индексом компонентов, гарантируя, что вы сможете аккуратно наслаивать и размещать элементы пользовательского интерфейса.

Потенциальные ловушки и соображения

Хотя порталы React полезны, имейте в виду следующее:

  • Проблемы с CSS. Порталы могут вызывать неожиданное поведение стилей CSS, поскольку они помещают контент за пределы родительских компонентов. Используйте глобальные стили или тщательно управляйте областью CSS.
  • Специальные возможности. Когда вы используете порталы для отображения контента, не забудьте сохранить в неизменном виде функции специальных возможностей, такие как навигация с помощью клавиатуры и совместимость с программой чтения с экрана.
  • Рендеринг на стороне сервера: порталы могут плохо сочетаться с рендеринг на стороне сервера (SSR). Поймите последствия и ограничения использования порталов в настройках SSR.

Вывод пользовательского интерфейса за рамки нормы

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

Освоив порталы и используя лучшие практики, вы можете создавать пользовательские интерфейсы, которые будут более адаптируемыми и простыми в обслуживании, избегая при этом проблем.

Независимо от того, создаете ли вы модальные окна или используете сторонние библиотеки, React Portals предоставляет мощный ответ для удовлетворения сложных потребностей пользовательского интерфейса.