En la parte de hoy de la traducción del curso de capacitación React, hablaremos sobre el uso del método de matriz map () estándar para organizar la formación dinámica del marcado JSX que describe conjuntos de elementos del mismo tipo.
→
Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX→
Parte 2: componentes funcionales→
Parte 3: archivos de componentes, estructura del proyecto→
Parte 4: componentes principales y secundarios→
Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo→
Parte 6: sobre algunas características del curso, JSX y JavaScript→
Parte 7: estilos en línea→
Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes→
Parte 9: propiedades del componente→
Parte 10: Taller sobre trabajo con propiedades de componentes y estilo→
Parte 11: generación de marcado dinámico y método de matrices de mapas→
Parte 12: taller, tercera etapa de trabajo en una aplicación TODO→
Parte 13: componentes basados en clases→
Parte 14: taller sobre componentes basados en la clase, estado de los componentes.→
Parte 15: talleres de componentes de salud→
Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos→
Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes→
Parte 18: la sexta etapa de trabajo en una aplicación TODO→
Parte 19: métodos del ciclo de vida de los componentes.Parte 20: la primera lección de representación condicional→
Parte 21: segunda lección y taller sobre representación condicional→
Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas→
Parte 23: primera lección sobre trabajar con formularios→
Parte 24: Segunda lección de formularios→
Parte 25: Taller sobre trabajo con formularios→
Parte 26: arquitectura de la aplicación, patrón de contenedor / componente→
Parte 27: proyecto del cursoLección 21. Generación de marcado dinámico y método de matrices de mapas
→
OriginalContinuaremos el trabajo desde el momento en que nos detuvimos para completar la tarea práctica anterior. Recuerde que el código del archivo
App.js veía así:
import React from "react" import Joke from "./Joke" function App() { return ( <div> <Joke punchLine="It's hard to explain puns to kleptomaniacs because they always take things literally." /> <Joke question="What's the best thing about Switzerland?" punchLine="I don't know, but the flag is a big plus!" /> <Joke question="Did you hear about the mathematician who's afraid of negative numbers?" punchLine="He'll stop at nothing to avoid them!" /> <Joke question="Hear about the new restaurant called Karma?" punchLine="There's no menu: You get what you deserve." /> <Joke question="Did you hear about the actor who fell through the floorboards?" punchLine="He was just going through a stage." /> <Joke question="Did you hear about the claustrophobic astronaut?" punchLine="He just needed a little space." /> </div> ) } export default App
El componente de
App muestra un conjunto de componentes de
Joke . Así es como se ve la página de la aplicación en esta etapa del trabajo.
Página de solicitudLa
question y
punchLine propiedades de
punchLine se pasan a algunos de estos componentes, y solo
punchLine a
punchLine . Ahora los valores de estas propiedades se establecen en el código para crear instancias del componente
Joke en forma de texto sin formato. En realidad, la mayor parte de los datos que se muestran en las páginas de las aplicaciones React ingresan a la aplicación como resultado de solicitudes HTTP a ciertas API. Estas API son compatibles con los servidores que toman información de las bases de datos, la formatean en forma de código JSON y envían este código a las partes cliente de las aplicaciones. Todavía no hemos alcanzado ese nivel para cumplir con las solicitudes de API, por lo que ahora, como fuente de datos, utilizaremos un archivo con datos que podrían obtenerse analizando la respuesta JSON del servidor. A saber, será un archivo
jokesData.js con los siguientes contenidos:
const jokesData = [ { id: 1, punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally." }, { id: 2, question: "What's the best thing about Switzerland?", punchLine: "I don't know, but the flag is a big plus!" }, { id: 3, question: "Did you hear about the mathematician who's afraid of negative numbers?", punchLine: "He'll stop at nothing to avoid them!" }, { id: 4, question: "Hear about the new restaurant called Karma?", punchLine: "There's no menu: You get what you deserve." }, { id: 5, question: "Did you hear about the actor who fell through the floorboards?", punchLine: "He was just going through a stage." }, { id: 6, question: "Did you hear about the claustrophobic astronaut?", punchLine: "He just needed a little space." } ] export default jokesData
Este archivo se ubicará en el directorio
src de nuestro proyecto.
Nuevo archivo en la carpeta srcDe hecho, contiene una variedad de objetos. Se puede obtener una matriz similar al analizar los datos JSON recibidos de una determinada API. Exportamos desde este archivo una serie de
jokesData de
jokesData . Si es necesario, podemos importar este archivo en el componente en el que se necesita e imaginar que estamos trabajando no con los datos tomados del archivo, sino con lo que nos devolvió alguna API.
Ahora que tenemos una matriz de datos de origen, pensemos en cómo convertir estos datos en un conjunto de instancias de componentes React.
Muchos desarrolladores dicen que gracias al dominio de React, han aprendido más sobre JavaScript. La razón de esto es porque las acciones similares a la que vamos a hablar en otros marcos como Angular y Vue se realizan utilizando algunos medios especiales. Y en React, esto se hace usando JavaScript normal.
En particular, planeamos usar algunos métodos estándar de matrices, que son funciones de orden superior. Estos métodos pueden, como argumentos, aceptar funciones descritas por programadores. Son estas funciones las que determinan qué hará una llamada a uno u otro método estándar con los elementos de la matriz.
Supongamos que tenemos una matriz numérica:
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Podemos procesar esta matriz usando el método de matriz
map() estándar, pasándole una determinada función que establece el orden de conversión de los elementos de esta matriz. En nuestro caso, esta función se pasará, uno a la vez, los números de esta matriz. Una función puede hacer cualquier cosa con ellos, después de lo cual lo que devuelve irá a una nueva matriz, a un elemento cuyo índice corresponde al índice del elemento que se está procesando. Si necesitamos formar una nueva matriz, cuyos elementos son elementos de la matriz original, multiplicados por 2, entonces se verá así:
const doubled = nums.map(function(num) { return num * 2 })
Verifique el funcionamiento de este código:
console.log(doubled)
Si no se ha encontrado con
métodos de matriz antes, como
map() ,
filter() ,
reduce() y otros, se recomienda tratar con ellos.
Aquí usaremos el método
map() para generar automáticamente una lista de instancias de componentes.
Volvamos a nuestro ejemplo. Importe el archivo
App.js archivo
App.js Se hace así:
import jokesData from "./jokesData"
Después de eso, en el código del programa, podemos trabajar con la matriz
jokesData . A saber, vamos a usar el método
map() . Así es como se verá el "espacio en blanco" de este método.
jokesData.map(joke => { })
Tenga en cuenta que aquí estamos pasando la función de flecha al método
map() . En nuestro caso, esto nos permite hacer el código más compacto. Como la función toma solo un parámetro (
joke ), nosotros, cuando se declara, podemos hacerlo sin paréntesis.
Desde la función pasada al método
map() , queremos devolver una nueva instancia del componente
Joke , a la que se le
punchLine propiedades
question y
punchLine del elemento de matriz
punchLine ingresó. Así es como podría verse:
jokesData.map(joke => { return ( <Joke question={joke.question} punchLine={joke.punchLine} /> ) })
Este código puede acortarse si se tienen en cuenta dos hechos. Primero,
return devuelve solo un elemento, por lo que puede colocar este elemento inmediatamente después de
return , eliminando la necesidad de paréntesis. En segundo lugar, la función de flecha contiene solo la operación de devolver un cierto valor, por lo tanto, al declarar dicha función, puede prescindir de la palabra clave
return y sin llaves. Además, recordamos que como resultado del método
map() , se forma una nueva matriz. Esta matriz debe guardarse en algún lugar. Todas estas consideraciones nos llevan a lo siguiente:
const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />)
La constante
jokeComponents ahora contendrá una matriz, cada elemento del cual es una descripción de una instancia del componente
Joke con la
question y
punchLine propiedades
punchLine pasaron.
¿Qué hacemos ahora con este conjunto de componentes? React hace que sea muy conveniente trabajar con tales matrices. Es decir, estamos hablando del hecho de que dicha matriz se puede usar en código JSX. Así es como se verá el código del archivo de la
App :
import React from "react" import Joke from "./Joke" import jokesData from "./jokesData" function App() { const jokeComponents = jokesData.map(joke => <Joke question={joke.question} punchLine={joke.punchLine} />) return ( <div> {jokeComponents} </div> ) } export default App
Después de eso, la página de la aplicación se verá igual que antes, sin embargo, verá la siguiente advertencia en la consola del navegador:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`. See https:
Su significado se reduce al hecho de que los elementos de la matriz deben tener una propiedad
key única. No entraremos en detalles sobre por qué React espera la propiedad
key única de los componentes duplicados. Es suficiente que tengamos en cuenta el hecho de que al realizar la creación masiva de instancias de componentes, como la que acabamos de realizar utilizando el método
map() , las instancias deben pasar la propiedad
key . Además, dicha propiedad se puede pasar a la propia instancia del componente y, por ejemplo, a la
<div> , en la que se incluye el código del componente. Esto no juega un papel especial.
Por lo tanto, la propiedad
key debe tener asignado un valor único. Como regla general, en los objetos de datos recibidos de la API, hay algunos identificadores (propiedades como
id ). Lo principal para nosotros es su singularidad. Por ejemplo, podríamos establecer la propiedad
key en
joke.question : todos los textos en estas propiedades son únicos en nuestra aplicación. Pero haremos lo contrario. Recuerde cómo se
jokesData.js los objetos con datos de la matriz que exportamos desde el archivo
jokesData.js . Aquí hay un fragmento de ella:
const jokesData = [ { id: 1, punchLine: "It's hard to explain puns to kleptomaniacs because they always take things literally." }, { id: 2, question: "What's the best thing about Switzerland?", punchLine: "I don't know, but the flag is a big plus!" }, ... ]
Cada objeto tiene una propiedad
id , cuya singularidad mantenemos de forma independiente. Son los valores de tales propiedades los que se pueden usar como valores para la propiedad
key .
Ahora el código para crear una matriz de instancias de componentes en
App.js tomará la siguiente forma:
const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)
Si realiza este cambio en el código, eche un vistazo a la página de la aplicación en el navegador y verifique el contenido de la consola, resulta que la notificación sobre la propiedad
key ha desaparecido.
Después de todas las transformaciones que sometimos al proyecto, la apariencia de la página de la aplicación no ha cambiado. Sin embargo, el código del componente de la
App ha vuelto mucho más corto y claro, y los datos para formar la lista de componentes ahora se toman de algo que se parece mucho a una fuente de datos externa. Es así como funcionan las aplicaciones reales.
Además, debe tenerse en cuenta que el núcleo de la modificación del código anterior fue el uso del método de matriz
map() estándar. Utilizamos la técnica de crear una lista de instancias del componente
Joke en el componente
App , pero nada nos impide, si es necesario, utilizar el mismo enfoque en el componente
Joke , que puede, según los datos transferidos, crear nuestra propia lista de instancias de un determinado componente.
Además, como ya hemos dicho, entre los métodos estándar de matrices, puede encontrar otras herramientas interesantes. Por ejemplo, el método
sort() se puede usar para ordenar los elementos de la matriz por algún atributo. El método
filter() se puede usar para seleccionar solo aquellos elementos de la matriz que cumplan ciertos criterios. Todo esto se aplica al trabajo con matrices que contienen instancias de componentes.
Si lo desea, puede experimentar con estos métodos. Digamos que intente usar el método
filter() y elimine de la salida generada por el componente de la
App aquellas instancias del componente de
Joke cuya propiedad de
question no exceda la longitud especificada. O asegúrese de que solo
punchLine componentes para los que están
punchLine tanto la propiedad de
question como la propiedad
punchLine .
Resumen
Hoy hablamos sobre el uso del método de matriz
map() estándar para compilar listas de componentes, y también discutimos las posibilidades que nos ofrecen otros métodos de matriz estándar. La próxima vez tendrá una lección práctica sobre el material estudiado hoy.
Estimados lectores! ¿Cómo resolvería el problema de que el componente de la aplicación muestre solo aquellas instancias del componente de broma cuya propiedad de pregunta exceda la longitud especificada?