web-dev-qa-db-ja.com

JSXを使用して要素をn回繰り返す方法

私は、自分のアプリでReact/JSXを使用して、Lodashを実現しています。

条件に応じて要素を特定の回数繰り返す必要がありますが、どうすればよいですか？

要素は次のとおりです。

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

そして、私はこのように割り当てています：

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

この場合、要素を8回繰り返す必要があります。 Lodashを使用するプロセスはどうあるべきですか？

javascriptlodashreact-jsx
43
StillDead

どうぞ：

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

各span要素にキーを追加すると、Reactキー属性がなくても文句を言わなくなります。

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

.timesの詳細については、こちらを参照してください。 https://lodash.com/docs#times

17
Long Nguyen

これを行う最短の方法外部ライブラリなし：

const n = 8; // Or something else

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

lodashまたはES6スプレッド構文のないソリューション：

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

このようにすることができます（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

_.timesの使用： https://jsfiddle.net/v1baqwxv/

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