Header Ads Widget

Ticker

6/recent/ticker-posts

Composición de componentes de React

 

Cuando hablamos de composición, estamos hablando de usar piezas más pequeñas para ensamblar una unidad cohesiva más grande. En React, los elementos se utilizan para crear componentes. En otras palabras, las piezas html comunes como divs, spans, forms, etc. se organizan juntas para crear un componente. Al hablar de componer componentes en React, nos referimos a tomar uno o más componentes y usarlos para construir una parte más grande de la aplicación. Entonces, en este tutorial, veremos cómo trabajar con un árbol de componentes mientras hacemos uso de la composición.


El artículo único actual

En este punto, estamos usando la aplicación create react para alojar un proyecto de reacción simple. El archivo index.js y el archivo item.jsx se muestran a continuación, lo que nos da la salida asociada.

Esto nos da una especie de efecto prolijo. Cuando no hay elementos, el encabezado es amarillo con texto. Una vez que hace clic para incrementar el recuento, el encabezado se vuelve azul con un recuento de cuántos elementos existen.


Composición de componentes

Ahora, en lugar de representar solo el <Item /> único en la aplicación de reacción, creemos un nuevo componente de <Items /> (plural) que usará el <Item /> en singular para componer una pieza más grande de funcionalidad en la aplicación. Para comenzar, podemos agregar un nuevo archivo items.jsx al directorio de componentes en Visual Studio Code.
nuevos elementos-archivo jsx reaccionar


Representar los componentes que lo contienen

Este nuevo componente items.jsx va a generar una lista de componentes item.jsx . Para que esto funcione, necesitamos hacer un ajuste en el archivo index.js . Este archivo ya no importará y representará un solo componente item.jsx, pero ahora importará este nuevo componente items.jsx y lo representará. Tenga en cuenta las actualizaciones de este archivo.


Agregar código a items.jsx

Nuestro nuevo archivo items.jsx aún no tiene ningún código. Queremos utilizar este componente para representar más de un componente item.jsx. Podemos comenzar simplemente renderizando dos componentes item.jsx así.

¡Excelente! Esto produce dos componentes que están completamente aislados entre sí.


De codificado a estado basado

En el ejemplo anterior, los componentes <Item /> están simplemente codificados directamente en el método de renderizado del componente <Items />. En lugar de codificarlos de forma rígida, podríamos agregar un nuevo objeto de estado al componente <Items /> que contendrá una matriz de objetos <Item />. Con eso, podemos usar una vez más el mapmétodo familiar para renderizar múltiples componentes <Item />.

Esto ahora nos da tres componentes únicos que se renderizan.


Tenga en cuenta que incluimos el requisito de una clave única al representar listas en react.


Pasar datos a componentes

Hemos establecido una especie de relación padre / hijo ahora. El componente <Items /> es el padre del componente <Item />. Ahora, queremos poder pasar datos del padre al hijo. Podemos hacer esto con el objeto props. Cada componente de reacción tiene una propiedad llamada props, que es un objeto de JavaScript que se puede usar para pasar datos. Entonces, primero, establecemos un atributo en el elemento secundario que se representa en el componente principal real. Entonces, en el código resaltado a continuación, el valueatributo se establece usando el estado del componente principal.


items.jsx (padre!)

El niño ahora puede aceptar ese atributo del objeto props. En el archivo item.jsx ahora podemos usar el valor pasado del padre para inicializar el recuento de cada elemento cuando se renderiza. ¡Este es un punto clave! Los datos que se utilizan para inicializar el el componente ya no proviene de su propio objeto de estado, sino más bien del objeto de estado de su padre, que pasa los datos a través de la propiedad.


item.jsx (niño!)

Ahora, cuando la página se carga por primera vez y se inicializan todos los componentes, podemos ver que el segundo elemento tiene un recuento inicial de 10.
reaccionar componentes secundarios inicializados a través del estado principal

¿Porqué es eso? Porque en el padre items.jsx , el objeto de estado se ve así.


Pasar niños a través de accesorios

Además de pasar datos del padre al hijo a través de los atributos establecidos en el elemento que se está renderizando, también podemos colocar marcas entre la etiqueta de apertura y cierre del elemento que se está renderizando. Ese marcado se puede recuperar en el niño usando this.props.children . Modifiquemos el marcado en el padre aquí. Modificamos <Item /> para tener una etiqueta de apertura y cierre. Luego teníamos algo de HTML entre esas etiquetas de apertura y cierre.


items.jsx (padre!)

Ahora compruebe cómo accedemos a esa propiedad secundaria aquí en el componente hijo.


item.jsx (niño!)

Esto nos da el siguiente resultado en el navegador.
ejemplo de reaccionar prop niños


Haciendo que los niños sean dinámicos

El accesorio para niños también puede pasar datos dinámicos. Aquí hay una versión actualizada que ahora muestra la identificación de cada <Item /> en el área del pie de página.

datos dinámicos con niños react


Resumen de composición de componentes de React

En este tutorial aprendimos un poco sobre cómo componer componentes en React. Al definir un componente, la función render () puede contener referencias a otros componentes como hemos visto anteriormente. Cuando un componente contiene otro componente, esto es lo que entendemos por composición o componentes que componen. Al usar la composición y los accesorios, tiene la capacidad de personalizar el aspecto y el comportamiento de los componentes como mejor le parezca.


Publicar un comentario

0 Comentarios