Saltar al contenido

Reaccionar bucle para rendir elementsDec, 14thIn este tutorial, vamos a aprender acerca de cómo recorrer …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo bucle a través de matriz de elementos en una reaccionar.

bucle For

consideramos que tenemos una gran variedad de usuarios, necesitamos bucle utilizando para bucle y hacer que los elementos en el DOM.

Podemos hacerlo de esta manera en reaccionar.

import React from "react";

function App() {
const users = ["user1", "user2", "user3"];
const final = [];
for (let user of users) {
final.push(

  • {user}
  • ); }
    return (

      {final}

    );
    }

    export default App;

    En el ejemplo anterior, se define una nueva matriz llamada final y en cada iteración, que son pushingthe elemento cada li en la matriz y finalmente se los haga dentro elemento ul. componentes basados ​​en la clase

    , puede hacerlo de forma similar.

    ejemplo:

    import React from "react";

    class App extends React.Component {
    render() {
    const users = ["user1", "user2", "user3"];
    const final = [];
    for (let user of users) {
    final.push(

  • {user}
  • );
    }
    return (

      {final}

    );
    }
    }

    export default App;

    Mapa método

    En el ejemplo anterior, hemos aprendido a utilizar bucle para hacer que el conjunto de elementos de ahora lo podemos hacer lo mismo utilizando el método de mapa de JavaScript.

    import React from "react";

    class App extends React.Component {
    render() {
    const users = ["user1", "user2", "user3"];

    return (

      {users.map((user,index) =>

    • {user}
    • )}

    );
    }
    }

    export default App;

    Nota: Si no se agrega un puntal clave de un elemento reaccionar advierte reaccionas porque las necesidades de rastrear los cambios de elementos mediante el uso de keys.key ser debe ser un valor único en su matriz.