Los portales nos permiten renderizar un componente en un nodo del DOM que no es hijo del componente que lo renderiza.
Es perfecto para ciertos casos de uso como, por ejemplo, modales:
import { createPortal } from 'react-dom'
function Modal() {
return createPortal(
<div className="modal">
<h1>Modal</h1>
</div>,
document.getElementById('modal')
)
}
createPortal
acepta dos parámetros:
- El primer parámetro es el componente que queremos renderizar
- El segundo parámetro es el nodo del DOM donde queremos renderizar el componente
En este caso el modal se renderiza en el nodo #modal
del DOM.