Come ripetere un elemento n volte usando JSX

Question

Sto usando React/JSX nella mia app per realizzare ciò che voglio, anche, Lodash.

Ho bisogno di ripetere un elemento un certo numero di volte a seconda di una condizione, come dovrei farlo?

Ecco l'elemento:

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

E Sto assegnando così:

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

Quindi, in questo caso, ho bisogno di ripetere l'elemento 8 volte. Quale dovrebbe essere il processo usando Lodash?

Answer 1

Qui si va:

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

si consiglia di aggiungere la chiave per ogni elemento in modo span Reagire non si lamentano di perdere l'attributo chiave:

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

Per maggiori informazioni sulla .times, fare riferimento qui: https://lodash.com/docs#times

Answer 2

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

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

Answer 3

Si potrebbe fare in questo modo (senza 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>); 
    } 
} 

Answer 4

La via più breve per fare questo senza librerie esterne:

const n = 8; // Or something else 

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

Answer 5

soluzione senza lodash o ES6 diffusione sintassi:

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