10.01.2024 в 14:47

Создание порталов в React с помощью хука usePortal

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

В этой статье мы рассмотрим специальный хук React под названием usePortal, который упрощает процесс создания порталов в ваших приложениях React.

Представляем UsePortal

Хук usePortal спроектирован как утилита многократного использования, которая инкапсулирует логику создания порталов и управления ими. Давайте углубимся в ключевые аспекты этого крючка.

Базовое использование Перехватчик usePortal принимает в качестве аргумента объект конфигурации, включая идентификатор портала, дополнительные атрибуты для стилизации и другие параметры настройки. Вот базовый пример:

   import { usePortal } from 'path-to-usePortal';

   const MyComponent = () => {
     const { elRef, id } = usePortal({ id: 'myPortal' });

     // Use elRef in your component as a reference to the portal element
     return (
       <div>
         {/* Your regular React component content */}
         <div ref={elRef}>
           {/* Portal content goes here */}
           This content is rendered outside the component hierarchy!
         </div>
       </div>
     );
   };

Пользовательский стиль. Вы можете настроить стиль портала, предоставив дополнительные параметры, такие как className, elementClass и атрибуты. Например:

   const MyStyledPortal = () => {
     const { elRef, id } = usePortal({
       id: 'styledPortal',
       className: 'my-custom-styles',
       elementClass: 'portal-content',
       attributes: { zIndex: 100 },
     });

     return (
       <div>
         <div ref={elRef}>Stylish portal content goes here!</div>
       </div>
     );
   };

Динамическое изменение порталов Перехват usePortal также предназначен для обработки сценариев, в которых конфигурация портала изменяется динамически. Например, вы можете обновить идентификатор портала, атрибуты или другие параметры в течение жизненного цикла компонента.

   const DynamicPortal = ({ dynamicId }) => {
     const { elRef, id } = usePortal({ id: dynamicId });
     return (
       <div>
         <div ref={elRef}>Content for the dynamic portal!</div>
       </div>
     );
   };

Детальнее:

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

Создание элемента портала: перехватчик использует MutableRefObject для отслеживания элемента портала. Если он не существует, создается новый элемент div.

Добавление к DOM: хук использует хук useEffect для управления жизненным циклом портала. Он проверяет, существует ли корень портала, и если нет, создает его. Затем он добавляет элемент портала в корень портала.

Очистка: перехватчик useEffect также обеспечивает правильную очистку, удаляя элемент портала из DOM при размонтировании компонента.

Заключение

Хук usePortal — это универсальный инструмент для создания порталов в приложениях React. Независимо от того, создаете ли вы модальные окна, всплывающие подсказки или любые другие наложенные компоненты, этот крючок предоставляет чистое и многократно используемое решение. Не стесняйтесь настраивать его в соответствии с вашими конкретными случаями использования.

Приятного кодирования!

Источник:

Exit fullscreen mode

#JavaScript #React

Войти на сайт

Создание порталов в React с помощью хука usePortal

Представляем UsePortal

Детальнее:

Заключение

Источник: