Representar una lista con React

Crear una lista en el navegador es una técnica muy común para mostrar una lista de datos. En este tutorial, aprenderemos cómo crear una lista de elementos usando React. Es un poco diferente de cómo podría abordar esto cuando usa algunos de los otros marcos de interfaz de usuario populares como Vue o Angular. En esos otros marcos, tiene directivas personalizadas como v-for o ng-for para iterar directamente en html. Con react, el enfoque es utilizar JavaScript nativo para la iteración. Entonces, en React, puede usar la función map () para iterar sobre una matriz y crear una lista. Veamos cómo hacerlo ahora.

Crear una lista estática

Ok, lo primero es lo primero. Antes incluso de usar cualquier arreglo de JavaScript para ayudar a crear una lista, recordemos cómo simplemente representar una lista estática. Entonces, con este marcado, deberíamos estar en el negocio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from "react";
 
class Item extends Component {
  state = {};
 
  render() {
    return (
      <React.Fragment>
        <ul class="list-group">
          <li class="list-group-item list-group-item-primary">List item 1</li>
          <li class="list-group-item list-group-item-primary">List item 2</li>
          <li class="list-group-item list-group-item-primary">List item 3</li>
        </ul>
      </React.Fragment>
    );
  }
}
 
export default Item;

reaccionar lista estática

Representar una lista de forma dinámica

Para representar una lista dinámicamente en React, comenzamos agregando una propiedad al objeto de estado. Podemos poblar esa propiedad con una matriz de cadenas como esta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from "react";
 
class Item extends Component {
  state = {
    listitems: ['List Item 1','List Item 2', 'List Item 3']
  };
 
  render() {
    return (
      <React.Fragment>
 
      </React.Fragment>
    );
  }
}
 
export default Item;

Excelente. Ahora queremos pasar al método render () para representar cada elemento de la lista de forma dinámica. Aquí es donde, en otros marcos, buscaría directivas de tipo ng-for o v-for. No podemos hacer eso en React. En su lugar, buscamos la función de mapa incorporada en JavaScript. Podemos usar la función de mapa para asignar cada elemento de la matriz a un elemento de reacción. Observe que pasamos una función de flecha como argumento a la función de mapa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";
 
class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3"]
  };
 
  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary" />
          ))}
        </ul>
      </React.Fragment>
    );
  }
}
 
export default Item;

En este punto tenemos una lista, pero cada li está vacío.
lista de funciones de mapa de reacción

¿Cómo podemos arreglar eso? Todo lo que tenemos que hacer es usar las llaves en la expresión JSX para generar cada elemento de la lista como tal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from "react";
 
class Item extends Component {
  state = {
    listitems: ["List Item 1", "List Item 2", "List Item 3"]
  };
 
  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li className="list-group-item list-group-item-primary">
              {listitem}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}
 
export default Item;

¡Aquí vamos! Tenemos nuestra lista renderizada dinámicamente usando React junto con la función de mapa de JavaScript.

Solo para demostrar que la lista es dinámica, podemos cambiar los datos en la matriz listitems y ver qué sucede.

1
2
3
  state = {
    listitems: ["Spring", "Summer", "Fall"]
  };

reaccionar lista dinámica a través del mapa

Cada niño en una lista debe tener un accesorio "clave" único

Ahora tenemos una lista que se muestra bien, pero no hemos terminado. Al inspeccionar la consola en el navegador, ahora notamos un mensaje de advertencia en texto rojo.

index.js: 1446 Advertencia: Cada niño en una lista debe tener un accesorio de "clave" único.
Compruebe el método de renderizado de Item. Consulte https://fb.me/react-warning-keys para obtener más información.

¿Que está sucediendo aquí? La razón por la que React se queja de esto es porque necesita identificar de forma única cada elemento de nuestra lista. Si el estado de este elemento de reacción en el dom virtual cambia, React necesita averiguar rápidamente qué elemento cambió y en qué lugar del dom real necesita reflejar ese cambio. Entonces, ¿cómo arreglamos esto? Bueno, cada vez que usamos la función de mapa para representar una lista de elementos, necesitamos establecer el atributo clave en el li de la lista. Así es como se hace.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from "react";
 
class Item extends Component {
  state = {
    listitems: ["Spring", "Summer", "Fall"]
  };
 
  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li
              key={listitem}
              className="list-group-item list-group-item-primary"
            >
              {listitem}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}
 
export default Item;

Entonces, en la línea resaltada arriba, observe que ahora hemos agregado un conjunto de claves a un valor dinámico en el elemento li. Ahora, en este caso, cada listitem es una cadena y cada cadena es única. Por lo tanto, podemos usar listitem como el valor de key. Una vez más, inspeccionamos la consola de herramientas del desarrollador y ya no obtenemos el error de Cada niño en una lista debería tener un accesorio "clave" único . En otros escenarios, la matriz con la que está tratando podría contener objetos. En ese caso, cada objeto podría tener una identificación única, y ese sería el valor del atributo clave. Además, esta clave única es única por lista representada, no para toda la aplicación.

Representar una matriz de objetos como una lista

Para terminar, rendericemos una lista donde la propiedad del estado contiene una matriz de objetos. De esa manera, podemos ver cómo funciona el enfoque de clave única cuando se utilizan objetos en lugar de cadenas simples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React, { Component } from "react";
 
class Item extends Component {
  state = {
    listitems: [
      {
        id: 0,
        context: "Primary",
        modifier: "list-group-item list-group-item-primary"
      },
      {
        id: 1,
        context: "Secondary",
        modifier: "list-group-item list-group-item-secondary"
      },
      {
        id: 2,
        context: "Success",
        modifier: "list-group-item list-group-item-success"
      },
      {
        id: 3,
        context: "Danger",
        modifier: "list-group-item list-group-item-danger"
      },
      {
        id: 4,
        context: "Warning",
        modifier: "list-group-item list-group-item-warning"
      }
    ]
  };
 
  render() {
    return (
      <React.Fragment>
        <ul className="list-group">
          {this.state.listitems.map(listitem => (
            <li key={listitem.id} className={listitem.modifier}>
              {listitem.context}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}
 
export default Item;

]
reaccionar renderizar matriz de objetos como lista

Representación de una lista con resumen de React

Como hemos visto, renderizar una lista en React no es tan malo. Si bien React no tiene el azúcar sintáctico de ng-for o v-for, podemos simplemente usar la función de mapa de JavaScript para producir el mismo efecto. Ese parece ser un tema común en React: usar JavaScript nativo para realizar ciertas tareas mientras deja que React administre el dom virtual.

Header Ads Widget

Representar una lista con React

Crear una lista estática

Representar una lista de forma dinámica

Cada niño en una lista debe tener un accesorio "clave" único

Representar una matriz de objetos como una lista

Representación de una lista con resumen de React

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget