Esta explicación sobre la comunicación entre componentes está mucho mas clara que la de clases anteriores, Gracias
Esta explicación sobre la comunicación entre componentes está mucho mas clara que la de clases anteriores, Gracias
Hola Fernando,
Gracias por tus palabras, me alegra que la explicación sobre la comunicación entre componentes te haya parecido más clara.
En resumen, la comunicación entre componentes en React se realiza a través de las props. Las props son argumentos que se pasan a los componentes de manera similar a cómo se pasan argumentos a las funciones.
Por ejemplo, en el código de la clase, se crea una función llamada "eliminarColaborador" en el componente App. Esta función se pasa como una prop a los componentes "Equipo", que a su vez la pasan a los componentes "Colaborador". De esta manera, cuando se hace clic en el botón de eliminar en un componente "Colaborador", se llama a la función "eliminarColaborador" que se encuentra en el componente App.
Aquí tienes un pequeño ejemplo de cómo se vería esto:
// Componente App
function App() {
const eliminarColaborador = () => {
console.log('Eliminar colaborador');
}
return (
<Equipo eliminarColaborador={eliminarColaborador} />
);
}
// Componente Equipo
function Equipo(props) {
return (
<Colaborador eliminarColaborador={props.eliminarColaborador} />
);
}
// Componente Colaborador
function Colaborador(props) {
return (
<button onClick={props.eliminarColaborador}>Eliminar</button>
);
}
En este ejemplo, cuando se hace clic en el botón "Eliminar" en el componente "Colaborador", se llama a la función "eliminarColaborador" que se encuentra en el componente "App". Esto es posible gracias a que la función se pasó como una prop a través de los componentes.
Espero que este ejemplo te ayude a entender mejor cómo funciona la comunicación entre componentes en React.
Espero haber ayudado y buenos estudios!