React Portals позволяют тебе рендерить компонент вне иерархии его родительского DOM. Это необходимо, когда у родительского контейнера есть CSS-свойства вроде overflow: hidden, z-index или position, которые иначе ограничивали бы или скрывали дочерние элементы.
Portals особенно полезны для компонентов, которым нужно визуально выйти за границы своего родительского контейнера:
Без portals дочерние элементы наследуют контекст наложения и свойства overflow своего родителя. Родитель с overflow: hidden обрезал бы любых детей, выходящих за его границы. Portals решают эту проблему, рендеря контент в другом поддереве DOM, обычно на уровне root, сохраняя при этом логические отношения родитель-потомок в дереве компонентов React.
Portals сохраняют иерархию компонентов React и обработку событий. События по-прежнему всплывают через дерево компонентов до своих логических родителей, даже если DOM рендерится где-то в другом месте. Это делает их идеальными для создания надёжных UI-компонентов, которым нужна визуальная независимость, но логическая интеграция с остальными компонентами.
React портальные компоненты рендерятся вне иерархии своего родительского DOM, но события проходят через логическое дерево компонентов, а не через физическое дерево DOM.
Новый — ещё не проверен сообществом
Вы