Портали дозволяють рендерити дочірні елементи в 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 з обробником 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 /> реалізований з використанням порталів чи без них.