Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Sugerencia] Mejor explicación de comunicación entre componentes

Esta explicación sobre la comunicación entre componentes está mucho mas clara que la de clases anteriores, Gracias

1 respuesta

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!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)