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('♦');?

— 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

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 => ♦);

— 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) => ♦)

— 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