Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента.
\nReactDOM.createPortal(child, container)Первый аргумент (child) — это любой React-компонент, который может быть отрендерен, такой как элемент, строка или фрагмент. Следующий аргумент (container) — это DOM-элемент.
Обычно, когда вы возвращаете элемент из рендер-метода компонента, он монтируется в DOM как дочерний элемент ближайшего родительского узла:
\nrender() {\n // React монтирует новый div и рендерит в него дочерние элементы\n return (\n <div> {this.props.children}\n </div> );\n}Но иногда требуется поместить потомка в другое место в DOM:
\nrender() {\n // React *не* создаёт новый div. Он рендерит дочерние элементы в `domNode`.\n // `domNode` — это любой валидный DOM-узел, находящийся в любом месте в DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode );\n}Типовой случай применения порталов — когда в родительском компоненте заданы стили overflow: hidden или z-index, но вам нужно чтобы дочерний элемент визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки.
\n\n\nПримечание:
\nПри работе с порталами, помните, что нужно уделить внимание управлению фокусом при помощи клавиатуры.
\nДля модальных диалогов, убедитесь, что любой пользователь будет способен взаимодействовать с ними, следуя практикам разработки модальных окон WAI-ARIA.
\n
Как уже было сказано, портал может находиться в любом месте DOM-дерева. Несмотря на это, во всех других аспектах он ведёт себя как обычный React-компонент. Такие возможности, как контекст, работают привычным образом, даже если потомок является порталом, поскольку сам портал всё ещё находится в React-дереве, несмотря на его расположение в DOM-дереве.
\nТак же работает и всплытие событий. Событие, сгенерированное изнутри портала, будет распространяться к родителям в содержащем React-дереве, даже если эти элементы не являются родительскими в DOM-дереве. Представим следующую HTML-структуру:
\n<html>\n <body>\n <div id=\"app-root\"></div>\n <div id=\"modal-root\"></div>\n </body>\n</html>Родительский компонент в #app-root сможет поймать неперехваченное всплывающее событие из соседнего узла #modal-root.
// Это два соседних контейнера в DOM\nconst appRoot = document.getElementById('app-root');\nconst modalRoot = document.getElementById('modal-root');\n\nclass Modal extends React.Component {\n constructor(props) {\n super(props);\n this.el = document.createElement('div');\n }\n\n componentDidMount() {\n // Элемент портала добавляется в DOM-дерево после того, как\n // потомки компонента Modal будут смонтированы, это значит,\n // что потомки будут монтироваться на неприсоединённом DOM-узле.\n // Если дочерний компонент должен быть присоединён к DOM-дереву\n // сразу при подключении, например, для замеров DOM-узла,\n // или вызова в потомке 'autoFocus', добавьте в компонент Modal\n // состояние и рендерите потомков только тогда, когда\n // компонент Modal уже вставлен в DOM-дерево.\n modalRoot.appendChild(this.el);\n }\n\n componentWillUnmount() {\n modalRoot.removeChild(this.el);\n }\n\n render() {\n return ReactDOM.createPortal( this.props.children, this.el ); }\n}\n\nclass Parent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {clicks: 0};\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() { // Эта функция будет вызвана при клике на кнопку в компоненте Child, // обновляя состояние компонента Parent, несмотря на то, // что кнопка не является прямым потомком в DOM. this.setState(state => ({ clicks: state.clicks + 1 })); }\n render() {\n return (\n <div onClick={this.handleClick}> <p>Количество кликов: {this.state.clicks}</p>\n <p>\n Откройте DevTools браузера,\n чтобы убедиться, что кнопка\n не является потомком блока div\n c обработчиком onClick.\n </p>\n <Modal> <Child /> </Modal> </div>\n );\n }\n}\n\nfunction Child() {\n // Событие клика на этой кнопке будет всплывать вверх к родителю, // так как здесь не определён атрибут 'onClick' return (\n <div className=\"modal\">\n <button>Кликните</button> </div>\n );\n}\n\nReactDOM.render(<Parent />, appRoot);Перехват событий, всплывающих от портала к родительскому компоненту, позволяет создавать абстракции, которые не спроектированы специально под порталы. Например, вы отрендерили компонент <Modal />. Тогда его события могут быть перехвачены родительским компонентом, вне зависимости от того, был ли <Modal /> реализован с использованием порталов или без них.