Los portales de React presentan una forma de representar a los niños en un Node DOM que se encuentra fuera de la jerarquía DOM del componente principal. Los portales se introdujeron en la versión React 16.0 .
Hasta ahora, 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, montamos nuestro componente de aplicación en nuestro 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. Si echa un vistazo al navegador en el árbol DOM, cada componente de React en nuestra aplicación cae bajo el elemento raíz, es decir, dentro de esta declaración.
<div id="root"></div>
Pero React Portals 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 seguir una jerarquía de elementos primarios y secundarios. Se usan comúnmente en cuadros de diálogo modales, hovercards, cargadores y mensajes emergentes.
Sintaxis:
ReactDOM.createPortal(child, container)
Parámetros: aquí, el primer parámetro es un elemento secundario que puede ser un elemento React, una string o un fragmento y el segundo parámetro 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 encuentra nuestro portal. se va a insertar.
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.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import ReactDOM from 'react-dom'
function App() {
// Creating a portal
return ReactDOM.createPortal(
<h1>Portal demo</h1>,
document.getElementById('portal')
)
}
export default App;
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> <!-- new div added to access the child component --> <div id="portal"></div> </body> </html>
Producción:
Explicación: Aquí, podemos ver que nuestra demostración del portal de la etiqueta <h1> está en el Node DOM del portal recién creado , no en el Node DOM raíz tradicional . Nos dice claramente cómo React Portal brinda la capacidad de salir del árbol DOM raíz y representar un componente/elemento fuera del elemento DOM principal.
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. Por ejemplo, si activamos un evento desde dentro de un portal, se propagará al componente principal en el árbol React que lo contiene, es decir, la propagación de eventos funciona de la misma manera que en circunstancias normales. Entendamos esto con otro ejemplo:
Ejemplo: Programa para demostrar cómo funciona el burbujeo de eventos con portales. Aquí, vamos a actualizar el valor anterior del estado activando un detector de eventos desde fuera del Node DOM principal.
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: 0};
// 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: prevState.click + 1
}));
}
render() {
return (
<div onClick={this.handleClick}
style={{marginLeft: '10px'}}>
<p>
You have clicked me {this.state.click} times
</p>
<Portal />
</div>
);
}
}
export default App;
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> <!-- new div added to access the child component --> <div id="portal"></div> </body> </html>
Producción:
Explicación: creamos un recuento de estado con un valor inicial de 0 y una función handleClick que incrementa el valor anterior de estado en 1. 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 . Incluso entonces, puede propagar el evento al componente principal y acceder al valor del estado como si fuera un componente React regular.
Enlace de referencia: https://reactjs.org/docs/portals.html
Publicación traducida automáticamente
Artículo escrito por gurjotloveparmar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA