So wiederholen Sie ein Element n-mal mit JSX

77

Ich verwende React / JSX in meiner App, um das zu erreichen, was ich will, auch Lodash.

Ich muss ein Element je nach Bedingung einige Male wiederholen. Wie soll ich das machen

Hier ist das Element:

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

Und ich ordne es so zu:

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

In diesem Fall muss ich die Elementzeiten wiederholen 8. Was sollte der Prozess mit Lodash sein?

javascript reactjs lodash StillDead
quelle
4
Wie wäre es new Array(8).join('<span className="busterCards">♦</span>');?
undefiniert
1
Die von @Vohuman vorgeschlagene Lösung ist ein sehr sauberer Weg, um die Arbeit zu erledigen. In den lodash-Dokumenten ist keine vergleichbare Funktion definiert .
Dan Beghin
2
@Vohuman würde einen String generieren, während OP DOM mit JSX-Syntax erstellen möchte.
Pawel
1
@Vohuman es ist komisch, aber ich werde die ganze Zeichenfolge gerendert
StillDead
1
@pawel du hast recht, weißt du wie ich das machen kann?
StillDead

Antworten:

30

Bitte schön:

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

Möglicherweise möchten Sie jedem spanElement einen Schlüssel hinzufügen, damit sich React nicht über das Fehlen des Schlüsselattributs beschwert:

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

Weitere Informationen .timesfinden Sie hier: https://lodash.com/docs#times

Langer Nguyen
quelle
1
Ich versuche dies dem zuzuweisen let card, aber es wiederholt das Element nicht
StillDead
1
Oder einfachconst card = _(8).times(idx => <span key=${idx} className="busterCards">♦</span>);
tokland
1
Sie können auch einfach _.times (.....) zurückgeben, um die Elemente zu rendern. Stellen Sie sicher, dass Sie auch return (<Element> </ Element) verwenden.
Msqar
237

Der kürzeste Weg, dies ohne externe Bibliotheken zu tun :

const n = 8; // Or something else

[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)
Waiski
quelle
10
Tolle Antwort für Nicht-Lodash-Benutzer! Es ist erwähnenswert, dass ES6-Funktionen erforderlich sind (obwohl ich denke, dass dies durch die Verwendung letin der Frage impliziert wird ).
Pseudoramble
6
Für diejenigen, die Typescript 2+ verwenden, wird dies kompiliert, bei Array(3).slice().map(...)dem nicht das gleiche Ergebnis erzielt wird . Siehe @ Jians Antwort unten als Ersatz.
Pierre vDEV
Schön, siehe meine Antwort, die mehr
ausführt
1
Warum kann das nicht einfach seinArray(n).map((e, i) => <span className="busterCards" key={i}>♦</span>)
Kevin Wang
5
@ KevinWang, da Ihr Vorschlag ein leeres Array mit einer Länge von 8 anstelle eines Arrays aus 8 undefinierten Elementen erstellt. Die Iteration funktioniert bei ersteren nicht. Wirf es in die Konsole, um den Unterschied zu sehen.
Darbio
42

Lösung ohne Lodash- oder ES6-Spread-Syntax:

Array.apply(null, { length: 10 }).map((e, i) => (
  <span className="busterCards" key={i}>
    ♦
  </span>
));
Weihang Jian
quelle
Dies ist die beste Antwort IMHO
Uriel
4

Verwenden von _.times: https://jsfiddle.net/v1baqwxv/

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

Sie könnten es so machen (ohne 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>);
    }
}
Allan
quelle