Lección 14. Comunicación entre Componentes.
Esta clase tiene como objetivo entender como se realiza la comunicación entre componentes.
REACT es Unidireccional (una sola dirección).
Comunicación de un componente Padre a un Hijo._
Con las props.
Para ello, creamos un componente llamado Padre.
export default class Padre extends Component {
state = {
contador: 0,
}
incrementarContador = (e) => {
this.setState({
contador: this.state.contador + 1
})
}
render() {
return (
<>
<h2>
Comunicación entre Componentes
</h2>
<Hijo
incrementarContador = {this.incrementarContador}
//Comunicacion de Padre a Hijo
mensaje = "Mensaje para el hijo 1"
/>
<Hijo
incrementarContador = {this.incrementarContador}
//Comunicacion de Padre a Hijo
mensaje = "Mensaje para el hijo 2"
/>
{console.log("renderizando padre")}
{console.log(this.state.contador)}
</>
)
}
}También creamos otro componente Hijo, el cual renderizaremos en el Padre.
function Hijo (props) {
return (
<>
<h3>
{props.mensaje}
</h3>
<button
//Comunicacion de Hijo a Padre, ejecutando el evento
onClick={props.incrementarContador}>
+
</button>
{console.log("Renderizando Hijo")}
</>
)
}De esta manera, un componente Padre, puede comunicarse con un componente Hijo.
Nota: No olvides importar el componente Padre para ser renderizado en pantalla e importar el componente Hijo en el archivo del componente padre.
Comunicación entre Hijo a Padre._
Con eventos.
¿Cómo puede hacer esto?
Que el component Hijo pueda afectar el estado del componente Padre. por medio de un evento.
En este mismo ejemplo, se aplica esta comunicación, mediante el paso de un evento como props al componente.
En la parte del llamado del componente Hijo:
<Hijo
//(Paso del evento mediante una prop)
incrementarContador = {this.incrementarContador}
//Comunicacion de Padre a Hijo
mensaje = "Mensaje para el hijo 1"
/>
<Hijo
//(Paso del evento mediante una prop)
incrementarContador = {this.incrementarContador}
//Comunicacion de Padre a Hijo
mensaje = "Mensaje para el hijo 2"
/>Y en el Hijo, la comunicación es al realizar el evento:
function Hijo (props) {
return (
<>
<h3>
{props.mensaje}
</h3>
<button
//Comunicacion de Hijo a Padre, ejecutando el evento
onClick={props.incrementarContador}>
+
</button>
{console.log("Renderizando Hijo")}
</>
)
}De esta manera, podemos afectar (comunicar) al Padre, cambiando el state (Renderizando) del componente Padre.
Al activar el evento en el Hijo, cambiamos el state del Padre ejecutando la función, graacias a esto, se realiza una comunicación.
Comunicación entre componentes no relacionados directamente._
Cuando queremos comunicar componentes NO relacionados directamente podemos usar:
Librerias.