UIKit
7.11.0
• PortalКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
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 |