私は自分のアプリでReact/JSXを使用しているので、Lodashもやっています。JSXを使用して要素をn回繰り返す方法
条件に応じて要素を一定回数繰り返す必要がありますが、どうすればよいですか？ここで
は要素です：
<span className="busterCards">♦</span>;
そして、私はこのようにそれを割り当てています：
let card;
if (data.hand === '8 or more cards') {
card = <span className="busterCards">♦</span>;
}
だからこのケースでは、私は、要素を8回繰り返す必要があります。 Lodashを使用しているプロセスは何ですか？
ここに行く：
let card = [];
_.times(8,() => {
card.push(<span className="busterCards">♦</span>);
});
あなたは各span要素にキーを追加することもできますので、キー属性行方不明に文句はありませんリアクト：.timesについての詳細情報については
let card = [];
_.times(8, (i) => {
card.push(<span className="busterCards" key={i}>♦</span>);
});
を、ここをクリックしてください：https://lodash.com/docs#times
私はこれを 'let card'に割り当てようとしていますが、要素を繰り返していません。 – StillDead
@StillDead答えを更新しました。見てみましょう！ –
使用_.times：https://jsfiddle.net/v1baqwxv/
var Cards = React.createClass({
render() {
return <div>cards {
_.times(this.props.count,() => <span>♦</span>)
}</div>;
}
});
あなたはこの（lodashなし）のようにそれを行うことができます：lodashまたはES6スプレッドなし
const n = 8; // Or something else
[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)
任意の外部ライブラリせずにこのを行うための最短の道を構文：
Array.apply(null, { length: 10 }).map((e, i) => (
<span className="busterCards" key={i}>
♦
</span>
));
非ロダッシュユーザーのための素晴らしい答え！ ES6機能が必要だと指摘する価値がある（ただし、とにかく質問で「let」を使用することによって暗黙に考えられると思うが）。 –
Typescript 2+を使用している場合、これは 'Array（3）.slice（）。map（...）'にコンパイルされ、同じ結果は得られません。以下の@ Jianの回答を代わりに参照してください。 –
ソリューション：
var numberOfCards = 8; // or more.
if (data.hand >= numberOfCards) {
var cards = [];
for (var i = 0; i < numberOfCards; i++) {
cards[i] = (<span className="busterCards">♦</span>);
}
}
「新しいAr ray（8）.join（ ''）; '？ – undefined
@Vohumanが提案した解決策は、仕事を完了させる非常にクリーンな方法です。 [lodashドキュメント]（https://lodash.com/docs）に定義されている同等の機能はありません。 –
@VohumanはStringを生成し、OPはJSX構文を使用してDOMを作成したいと考えています。 – pawel