Portals fornece uma forma elegante de renderizar um elemento filho dentro de um nó DOM que existe fora da hierarquia do componente pai.
\nReactDOM.createPortal(child, container)O primeiro argumento (child) é qualquer elemento filho React renderizável, como um elemento, string ou fragmento. O segundo argumento (container) é um elemento DOM.
Normalmente, quando retornamos um elemento pelo método render de um componente ele é montado dentro do DOM como um filho do nó pai mais próximo:
\nrender() {\n // React monta uma nova div e renderiza o filho dentro dela\n return (\n <div> {this.props.children}\n </div> );\n}Entretanto, em algumas situações é útil inserir um elemento filho em um local diferente no DOM:
\nrender() {\n // React *não* cria uma nova div. Ele renderiza os filhos dentro do `domNode`.\n // `domNode` é qualquer nó DOM válido, independente da sua localização no DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode );\n}Um caso típico do uso de portals é quando um componente pai tem o estilo overflow: hidden ou z-index, mas você precisa que o filho visualmente “saia” desse contêiner. Por exemplo, caixas de diálogo, hovercards e tooltips.
\n\n\nNota:
\nQuando estiver trabalhando com portals, lembre-se que tratar o evento focus se torna muito importante.
\nNo caso dos modals, assegure-se que todos possam interagir com eles seguindo as práticas descritas em WAI-ARIA Modal Authoring Practices.
\n
Apesar de um portal poder estar em qualquer lugar na árvore DOM, seu comportamento é como o de qualquer outro elemento React filho. Funcionalidades como contexto funcionam da mesma forma independente se o filho é um portal, pois o portal ainda existe na árvore React independentemente da posição que esteja na árvore DOM.
\nIsso inclui a propagação de eventos. Um evento disparado dentro de um portal será propagado para os elementos antecessores da árvore React, mesmo que estes não sejam antecessores na árvore DOM.\nConsidere a seguinte estrutura HTML:
\n<html>\n <body>\n <div id=\"app-root\"></div>\n <div id=\"modal-root\"></div>\n </body>\n</html>Um componente Pai em #app-root será capaz de capturar a propagação de um evento não tratado vindo do nó irmão #modal-root.
// Estes dois contêineres são irmãos no 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 // O elemento portal é inserido na árvore DOM depois que\n // os componentes filhos de `Modal` são montados, o que significa que os filhos\n // serão montados em um nó DOM separado. Se um componente\n // filho precisa ser colocado na árvore DOM\n // imediatamente quando é montado, por exemplo para medir um\n // nó DOM ou usar 'autoFocus' em um descendente, adicione\n // state ao Modal e renderize o filho apenas quando o Modal\n // estiver inserido na árvore 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() { // Isso é disparado quando o botão no filho é clicado, // atualizando o state do componente Pai, mesmo que o filho // não seja um descendente direto no DOM. this.setState(state => ({ clicks: state.clicks + 1 })); }\n render() {\n return (\n <div onClick={this.handleClick}> <p>Número de cliques: {this.state.clicks}</p>\n <p>\n Abra o DevTools do navegador\n para observar que o botão\n não é um filho da div\n com o onClick.\n </p>\n <Modal> <Child /> </Modal> </div>\n );\n }\n}\n\nfunction Child() {\n // O evento de clique nesse botão irá propagar para o ascendente, // porque o atributo 'onClick' não está definido return (\n <div className=\"modal\">\n <button>Clicar</button> </div>\n );\n}\n\nReactDOM.render(<Parent />, appRoot);Capturar um evento propagado a partir de um portal em um componente pai permite o desenvolvimento de abstrações mais flexíveis que não dependem diretamente de portals. Por exemplo, se você renderizar um componente <Modal />, o componente pai pode capturar seus eventos independentemente se são implementados usando portals.