En la versión React 16.0, se introdujeron los portales React. Los portales de React presentan una forma de representar componentes secundarios en un Node DOM que generalmente ocurre fuera de la jerarquía DOM del componente principal.
Antes de React Portals, era muy difícil representar el componente secundario fuera de la jerarquía de su componente principal. Como teníamos un elemento DOM en el HTML en el que estábamos montando nuestra aplicación de reacción, es decir, el elemento raíz de nuestro index.html en la carpeta pública. Básicamente, React monta el componente de la aplicación en el elemento raíz. Es casi una convención tener un elemento div con el id de root para ser usado como el elemento DOM raíz. Cada uno de los componentes de React en la aplicación de reacción cae bajo el elemento raíz, es decir, dentro de esta declaración.
<div id="root"></div>
Pero, el concepto del portal React nos brinda la capacidad de salir de este árbol dom y representar un componente en un Node dom que no está bajo este elemento raíz. Hacerlo rompe la convención en la que un componente debe representarse como un elemento nuevo y sigue una jerarquía de elementos primarios y secundarios. Los portales se usan comúnmente en cuadros de diálogo modales, tarjetas flotantes, cargadores y mensajes emergentes. A continuación se muestra la sintaxis de los portales React.
Sintaxis:
ReactDOM.createPortal(child, container)
En la sintaxis anterior, tenemos dos parámetros: el primer parámetro es un elemento secundario que puede ser un elemento React, una string o un fragmento y el segundo es un contenedor que es el Node DOM (o ubicación) que se encuentra fuera de la jerarquía DOM del componente principal en el que se insertará nuestro portal.
Ventajas de los portales React:
- Burbujeo de eventos dentro de un portal: aunque no representamos un portal dentro del elemento DOM principal, su comportamiento sigue siendo similar al de un componente React normal dentro de la aplicación. Puede acceder a los accesorios y al estado, ya que reside dentro de la jerarquía del árbol DOM.
- Los portales de React pueden usar la API de contexto para transferir los datos en componentes.
Importación: para crear y usar portales, debe importar ReactDOM como se muestra a continuación.
import ReactDOM from 'react-dom';
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
GFG
Ejemplo: Este es el ejemplo de los portales. Aquí, hemos creado un botón, cada vez que hacemos clic muestra una string.
src/App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Portal extends Component {
render() {
// Creating portal
return ReactDOM.createPortal(
<button style={{ marginLeft: '10px' }}>
Click
</button>,
document.getElementById('portal')
);
}
}
class App extends Component {
constructor(props) {
super(props);
// Set initial state
this.state = { click: '' };
// Binding this keyword
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// This will trigger when the button
// inside Portal is clicked, It updates
// Parent's state, even though it is not
// rendered inside the parent DOM element
this.setState(prevState => ({
click: "Welcome to gfg"
}));
}
render() {
return (
<div onClick={this.handleClick}
style={{ marginLeft: '10px' }}>
<h2 style={{ color: 'Green' }}>
{this.state.click}
</h2>
<Portal />
</div>
);
}
}
export default App;
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content= "Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <div id="portal"></div> </body> </html>
Producción:
Explicación: creamos un estado con una string vacía y una función handleClick que establece el valor del estado en «Bienvenido a gfg». Este último se activa como un evento onClick cuando hacemos clic en el botón que se ha representado fuera del Node DOM raíz.
¿Cuándo los necesitamos?
Principalmente necesitamos portales cuando un componente principal de React tiene un valor oculto de propiedad de desbordamiento (desbordamiento: oculto) o estilo de índice z, y necesitamos un componente secundario para salir abiertamente de la jerarquía de árbol actual.
Los siguientes son los ejemplos cuando necesitamos los portales de reacción:
- Diálogos
- modales
- Información sobre herramientas
- hovercards
En todos estos casos, representamos elementos fuera de los componentes principales en el árbol DOM.
Referencia: https://reactjs.org/docs/portals.html
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA