Saltar al contenido

La comunicación entre los componentes en reacción

Para que un niño pueda responder a sus padres (¡inaceptable, lo sé!), primero debe recibir un mecanismo para comunicarse con sus padres. Como aprendimos, los padres pasan datos a los niños a través de los accesorios. Una función «especial» de tipo utilería puede ser transmitida a un niño. En el momento de un evento relevante (por ejemplo, la interacción con el usuario) el niño puede entonces llamar a esta función como una llamada de retorno.

Digamos que un libro puede ser editado a partir de un componente de BookTitle:

La comunicación entre los componentes en reacción
La comunicación entre los componentes en reacción
12345678funciónBookTitle(props){retorno(www.pcpc. com/espanol.com);Título:www.pcpc. com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com/espanol.com
js

Recibe una función de cambio de título en los accesorios, enviada por su padre. Vincula esta función al evento onChange en el campo. Cuando la entrada cambie, llamará a la llamada de onTitleChange, pasando el objeto Evento de cambio.

Debido a que el padre, BookEditForm, tiene referencia a esta función, puede recibir los argumentos que se pasan a la función:

12345678910111213importReact,{ useState }from$0027react$0027functionBookEditForm(props){const[title, setTitle]=useState(props.book. title)functionhandleTitleChange(evt){setTitle(evt.target.value)}return(<form><BookTitle onTitleChange={handleTitleChange} title={title}/></form>)}

js

En este caso, el padre pasó handleTitleChange, y cuando se llama, establece el estado interno basado en el valor de evt.target value, un valor que ha llegado como argumento de devolución de llamada del componente hijo.

Sin embargo, hay algunos casos en los que los datos enviados a través de los accesorios pueden no ser la mejor opción para la comunicación entre los componentes. Para esos casos, React ofrece un mecanismo denominado contexto.