Compartir estado entre componentes

A veces, quieres que el estado de dos componentes cambie siempre juntos. Para hacerlo, elimina el estado de ambos, muévelo a su ancestro común más cercano y luego pásalo hacia abajo a través de props. Esto se conoce comolevantar el estado,y es una de las cosas más comunes que harás al escribir código en React.

Levantar el estado con un ejemplo

En este ejemplo, un componente padreAccordionrenderiza dosPanels separados:

• Accordion
  • Panel
  • Panel

Cada componentePaneltiene un estado booleanoisActiveque determina si su contenido es visible.

Presiona el botón Mostrar para ambos paneles:

Observa cómo presionar el botón de un panel no afecta al otro panel: son independientes.

Inicialmente, el estadoisActivede cadaPanel es false, por lo que ambos aparecen colapsados

Hacer clic en el botón de cualquierPanelsolo actualizará el estadoisActivede esePanelen particular

Pero ahora digamos que quieres cambiarlo para que solo un panel esté expandido en un momento dado.Con ese diseño, expandir el segundo panel debería colapsar el primero. ¿Cómo lo harías?

Para coordinar estos dos paneles, necesitas "levantar su estado" a un componente padre en tres pasos:

1. Eliminarel estado de los componentes hijos.
2. Pasardatos codificados desde el padre común.
3. Agregarestado al padre común y pasarlo hacia abajo junto con los manejadores de eventos.

Esto permitirá que el componenteAccordioncoordine ambosPanels y solo expanda uno a la vez.

Paso 1: Eliminar el estado de los componentes hijos

Le darás el control del estadoisActivedelPanela su componente padre. Esto significa que el componente padre pasaráisActivealPanelcomo una prop. Comienzaeliminando esta líneadel componentePanel:

Y, en su lugar, añadeisActivea la lista de props delPanel:

Ahora el componente padre delPanel puede controlarisActive pasándolo como prop.Por el contrario, el componentePanel ahora no tiene controlsobre el valor deisActive—¡ahora depende del componente padre!

Paso 2: Pasa datos codificados desde el padre común

Para elevar el estado, debes localizar el componente padre común más cercano deamboscomponentes hijos que quieres coordinar:

• Accordion(padre común más cercano)
  • Panel
  • Panel

En este ejemplo, es el componenteAccordion. Como está por encima de ambos paneles y puede controlar sus props, se convertirá en la "fuente de verdad" sobre qué panel está activo actualmente. Haz que el componenteAccordionpase un valor codificado deisActive(por ejemplo,true) a ambos paneles:

Intenta editar los valores codificados deisActiveen el componenteAccordiony observa el resultado en pantalla.

Paso 3: Añade estado al padre común

Elevar el estado a menudo cambia la naturaleza de lo que almacenas como estado.

En este caso, solo un panel debería estar activo a la vez. Esto significa que el componente padre comúnAccordionnecesita llevar la cuenta decuálpanel es el activo. En lugar de un valorboolean, podría usar un número como índice delPanelactivo para la variable de estado:

Cuando elactiveIndexes0, el primer panel está activo, y cuando es1, es el segundo.

Hacer clic en el botón "Mostrar" de cualquierPanelnecesita cambiar el índice activo enAccordion. UnPanelno puede establecer el estadoactiveIndexdirectamente porque está definido dentro delAccordion. El componenteAccordionnecesitapermitir explícitamenteque el componentePanelcambie su estadopasando un controlador de eventos como prop:

El<button>dentro delPanelahora usará la proponShowcomo su controlador de eventos de clic:

¡Esto completa la elevación del estado! Mover el estado al componente padre común te permitió coordinar los dos paneles. Usar el índice activo en lugar de dos indicadores "se muestra" aseguró que solo un panel esté activo en un momento dado. Y pasar el controlador de eventos al hijo permitió que el hijo cambiara el estado del padre.

Inicialmente, elAccordiontieneactiveIndexen0, por lo que el primerPanelrecibeisActive = true

Cuando el estadoactiveIndexdelAccordioncambia a1, el segundoPanelrecibeisActive = trueen su lugar

Una única fuente de verdad para cada estado

En una aplicación React, muchos componentes tendrán su propio estado. Algunos estados pueden "vivir" cerca de los componentes hoja (componentes en la parte inferior del árbol), como las entradas. Otros estados pueden "vivir" más cerca de la parte superior de la aplicación. Por ejemplo, incluso las bibliotecas de enrutamiento del lado del cliente generalmente se implementan almacenando la ruta actual en el estado de React y pasándola hacia abajo mediante props.

Para cada pieza única de estado, elegirás el componente que lo "posee".Este principio también se conoce como tener una"única fuente de verdad".No significa que todo el estado viva en un solo lugar, sino que paracadapieza de estado, hay uncomponente específicoque contiene esa información. En lugar de duplicar el estado compartido entre componentes,elévaloa su padre común compartido ypásalo hacia abajoa los hijos que lo necesiten.

Tu aplicación cambiará a medida que trabajes en ella. Es común que muevas el estado hacia abajo o hacia arriba mientras aún estás averiguando dónde "vive" cada pieza del estado. ¡Todo esto es parte del proceso!

Para ver cómo se siente esto en la práctica con algunos componentes más, leePensando en React.

Recapitulación

• Cuando quieras coordinar dos componentes, mueve su estado a su padre común.
• Luego pasa la información hacia abajo a través de props desde su padre común.
• Finalmente, pasa los manejadores de eventos hacia abajo para que los hijos puedan cambiar el estado del padre.
• Es útil considerar los componentes como "controlados" (impulsados por props) o "no controlados" (impulsados por estado).