Saltar al contenido

Cómo manejar el estado en un componente de árbol en ReactJS

En React, si tienes que pasar los datos de un componente a otro componente, entonces tienes que usar el estado para pasar del padre y los accesorios para obtener los datos del padre.

Inicialmente, sólo tienes un componente, AppComponent.

Cómo manejar el estado en un componente de árbol en ReactJS
Cómo manejar el estado en un componente de árbol en ReactJS

Para esta demostración, crearás un acordeón. Será una simple aplicación con un par de listas. No te molestes con el CSS o la parte de la apariencia; esta guía se centra en los conceptos alrededor de la gestión del estado.

Primero, crear un componente padre. Crear el estado y enviarlo al componente hijo como accesorios.

Padre.js

1234567891011121314151617181920212223242526272829303132333435importReact,{useState }from "react";importChildfrom". /Child";functionParent(){const[state, setState]=useState([{ título: "Primer elemento", descripción: "Este es el primer elemento", isOpen:false},{ título: "Segundo elemento", descripción: "Este es el segundo elemento", isOpen:false},{ título: "Tercer elemento", descripción: "Este es el tercer elemento", isOpen:false}]);return(<ul>{state. map((item, index)={{{retorno(wi)};Childitem={item}arr={state}setItem={setState}/{N-li>})}</ul>);};}exportdefaultParent;

jsx

En el código anterior, el gancho useState se utiliza para crear una variable para el estado y una función para cambiar el estado. Si no estás familiarizado con esto, puedes aprender más aquí.

A la función useState(), pasa una matriz, que será el valor inicial del estado. En la matriz, tendrás un par de objetos con tres campos: title, description, e isOpen.

Usando la matriz del estado, haz una lista no ordenada. Utiliza el método map() para crear una lista de componentes hijos en la que pasarás el elemento, el array y la función setState.

A continuación, cree el componente infantil.

Niño.js

123456789101112131415161718192021importReactfrom "react";functionChild(props){let{ item, arr, setItem }= props;functiononToggle(it){let newArr = arr.map(data= &gt { data.isOpen= data.title== it. title;return data;});setItem(newArr);}return(<divkey={item.title};<labelonClick={()=;onToggle(item)};{item. título}</etiqueta};{item.esAbrir&&};{item.descripción}</promedio}</div;);}exportarNiños por defecto;

jsx

En el componente infantil, estás aceptando los accesorios. Como se mencionó anteriormente, los accesorios almacenarán los datos del estado.

El artículo es el índice de datos actual. El arr es un array completo, y setItem es la función para cambiar el valor del estado del componente padre.

En el bloque de retorno del componente infantil, cree un bloque div con una etiqueta para mostrar el título de la lista y una etiqueta de párrafo(p) que muestre la descripción de la lista.

La descripción depende de isAbrir para que se muestre en el navegador. Se cambia haciendo clic en el título de la lista. Llama a la función onToggle() cuando el usuario hace clic en el título.

En el método onToggle(), compara el título, asumiendo que tienes un título único en la matriz. Si el título del elemento coincide con uno de los títulos de los elementos de la matriz, entonces el valor de isOpen de ese elemento será verdadero. De lo contrario, será falso.

Después de ajustar el valor de isOpen, actualiza el valor del estado usando la matriz modificada.

Añade el siguiente código a tu archivo App.js .

App.js

123456789101112importReactfrom "react";importParentfrom"./componentes/Parent";functionApp(){return(<divclassName="App"<Parent/ </div>);}exportdefaultApp;

jsx

Renderizar el componente de los padres en el componente de la aplicación.

Tu aplicación está lista para funcionar. Presiona el comando npm start en tu CLI.