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?

77
StillDead 10 dic. 2015 a las 00:30

5 respuestas

La mejor respuesta

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

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

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

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

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