UIKit
7.25.0
• PortalКомпоненты
UIKit
7.25.0
Date Components
3.4.0
Navigation
3.7.4
import {Portal} from '@gravity-ui/uikit';
Portal — утилитный компонент, который представляет собой простую обертку для createPortal в React и позволяет рендерить дочерние элементы в DOM-узле за пределами родительского компонента.
§Контейнер
По умолчанию Portal рендерит дочерние элементы в document.body. Это можно поменять в свойстве container.
Кроме того, можно задать контейнер для всех порталов в поддереве React с помощью компонента PortalProvder.
import {Portal, PortalProvider} from '@gravity-ui/uikit'
const myRoot = document.getElementById('my-root');
<Portal>This is rendered inside document.body</Portal>
<Portal container={myRoot}>This is rendered inside #my-root node</Portal>
<PortalProvider container={myRoot}>
<Portal>This is also rendered inside #my-root</Portal>
</PortalProvider>
§Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| children | Любое содержимое React. | React.ReactNode | |
| container | DOM-элемент, в который монтируются дочерние элементы. | HTMLElement | document.body |
| disablePortal | Если установлено значение true, дочерние элементы будут рендериться в стандартной иерархии DOM. | boolean |