Cómo repetir un elemento n veces usando JSX

Question

Estoy usando React / JSX en mi aplicación para lograr lo que quiero, también, Lodash.

Necesito repetir un elemento una cierta cantidad de veces dependiendo de una condición, ¿cómo debo hacer eso?

Aquí está el elemento:

<span className="busterCards">♦</span>;

Y lo estoy asignando así:

    let card;
    if (data.hand === '8 or more cards') {
      card = <span className="busterCards">♦</span>;
    }

Entonces, en este caso, necesito repetir el elemento 8 veces. ¿Cuál debería ser el proceso con Lodash?

javascript reactjs lodash

77

StillDead 10 dic. 2015 a las 00:30

Answer 1

Aquí tiene:

let card = [];
_.times(8, () => {
  card.push(<span className="busterCards">♦</span>);
});

Es posible que desee agregar la clave a cada elemento span para que React no se queje de la falta del atributo clave:

let card = [];
_.times(8, (i) => {
  card.push(<span className="busterCards" key={i}>♦</span>);
});

Para obtener más información acerca de .times, consulte aquí: https://lodash.com/docs#times

24

Long Nguyen 10 dic. 2015 a las 03:37

Answer 2

Utilizando _.times: https://jsfiddle.net/v1baqwxv/

var Cards = React.createClass({
    render() {
        return <div>cards {
          _.times( this.props.count, () => <span>♦</span> )
        }</div>;
    }
});

4

pawel 9 dic. 2015 a las 21:57

Answer 3

La forma más corta de hacer esto sin bibliotecas externas :

const n = 8; // Or something else

[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)

167

Waiski 11 sep. 2016 a las 17:01

Answer 4

Podrías hacerlo así (sin lodash):

var numberOfCards = 8; // or more.

if (data.hand >= numberOfCards) {
    var cards = [];

    for (var i = 0; i < numberOfCards; i++) {
        cards[i] = (<span className="busterCards">♦</span>);
    }
}

2

Allan 9 dic. 2015 a las 22:12

Answer 5

Solución sin lodash o sintaxis ES6 spread:

Array.apply(null, { length: 10 }).map((e, i) => (
  <span className="busterCards" key={i}>
    ♦
  </span>
));

31

Jian Weihang 15 dic. 2017 a las 06:22

Cómo repetir un elemento n veces usando JSX

5 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript