JSX

Question

kullanarak bir öğeyi n kez yinelemiyorum Ne de, Lodash, istediğim gerçekleştirmek için benim app React/JSX kullanıyorum.

Bir öğeye, bir koşula bağlı olarak belirli bir süre tekrar etmem gerekiyor, bunu nasıl yapmalıyım? İşte

öğedir:

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

Ve bu şekilde atama ediyorum:

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

Yani bu durumda, ben elemanını 8 kez tekrarlamanız gerekir. Lodash'ı kullanan süreç ne olmalı? İşte

Answer 1

gitmek:

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

Çok önemli özelliği eksik şikayetçi olmaz Tepki her span elemana anahtarı eklemek isteyebilirsiniz: Daha fazla bilgi hakkında .times için

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

, Buraya bakın: https://lodash.com/docs#times

Answer 2

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

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

Answer 3

Sen (lodash olmadan) şöyle yapabilirsiniz: herhangi bir harici kütüphaneleri olmadan bu yapmak

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

kısa yoldan:

lodash veya ES6 yayılması olmayan

const n = 8; // Or something else 

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

Answer 5

çözüm sözdizimi:

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