Wie man ein Element n-mal mit JSX und Lodash wiederholt

Lesezeit: 3 Minuten

Immer noch tot

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

Ich muss ein Element abhängig von einer Bedingung eine bestimmte Anzahl von Malen 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 also das Element wiederholen 8 mal. Wie sollte der Prozess mit Lodash aussehen?

Wie wäre es mit new Array(8).join('♦');?

– RAM

9. Dezember 2015 um 21:39 Uhr
Die von @Vohuman vorgeschlagene Lösung ist ein sehr sauberer Weg, um die Arbeit zu erledigen. Innerhalb der ist keine vergleichbare Funktion definiert Lodash-Dokumente.

– dbeg

9. Dezember 2015 um 21:42 Uhr
@Vohuman würde einen String generieren, während OP DOM mit JSX-Syntax erstellen möchte.

– Pawel

9. Dezember 2015 um 21:45 Uhr
@Vohuman es ist komisch, aber ich bekomme die ganze Zeichenfolge gerendert

– Immer noch tot

9. Dezember 2015 um 21:47 Uhr
@pawel du hast recht, weißt du wie ich das machen kann?

– Immer noch tot

9. Dezember 2015 um 21:48 Uhr

Der kürzeste Weg dazu ohne externe Bibliotheken:

const n = 8; // Or something else

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

Tolle Antwort für Nicht-Lodash-Benutzer! Es sei darauf hingewiesen, dass ES6-Funktionen erforderlich sind (obwohl ich denke, dass dies durch die Verwendung von let sowieso in der Frage).

– Pseudoramble

14. Oktober 2016 um 2:09 Uhr
Für diejenigen, die Typescript 2+ verwenden, wird dies kompiliert Array(3).slice().map(...) was nicht das gleiche Ergebnis erzielt. Siehe die Antwort von @ Jian unten als Ersatz.

– Pierre vDEV

29. Januar 2018 um 14:23 Uhr
Schön, siehe meine Antwort, die mehr ausführt

– vsync

16. Juli 2018 um 11:15 Uhr
Warum kann das nicht einfach sein Array(n).map((e, i) => ♦)

– Kevin Wang

4. Juni 2019 um 21:30 Uhr
@KevinWang, weil Ihr Vorschlag eine erstellen wird leer Array mit einer Länge von 8, anstatt ein Array, das aus 8 undefinierten Elementen besteht. Iteration funktioniert bei ersterem nicht. Stecken Sie es in die Konsole, um den Unterschied zu sehen.

– Darbio

13. Juni 2019 um 23:04 Uhr

Lösung ohne Lodash oder ES6 Spread-Syntax:

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

Dies scheint sauberer zu sein, aber mit mehr Iterationen als etwa 126000 erhalte ich “Maximale Aufruflistengröße überschritten” (zumindest in Chrome Web Desktop).

– jave.web

26. Februar 2022 um 22:56 Uhr
Ich bin auf einen Kollegen gestoßen, der diesen Code verwendet, und die Verwendung von Array.apply, um eine bestimmte Anzahl von Wiederholungen zu wiederholen, war für mich auf den ersten Blick nicht intuitiv. Ich persönlich würde zuerst andere intuitivere Lösungen in Betracht ziehen, wenn zukünftige Entwickler Ihren Code lesen werden.

– Logan Cundiff

11. April 2022 um 17:02 Uhr
Es tut mir leid, davon zu hören. Die Lösung zielt darauf ab, so wenig Abhängigkeiten wie möglich zu verwenden. Ich würde Ihrem Kollegen vorschlagen, die Lesbarkeit zu verbessern, indem er es zu einer wiederverwendbaren Funktion mit einem vernünftigen Namen wie macht times.

– Weihang Jian

12. April 2022 um 4:22 Uhr

Lange Nguyen

Bitte schön:

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

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

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

Für weitere Informationen über .timessiehe hier: https://lodash.com/docs#times

Ich versuche dies dem zuzuordnen let cardaber es wiederholt das Element nicht

– Immer noch tot

9. Dezember 2015 um 21:54 Uhr
Oder einfach const card = _(8).times(idx => ♦);

– Tokland

20. Oktober 2018 um 10:46 Uhr
Sie können auch einfach _.times(…..) zurückgeben, um die Elemente zu rendern. Stellen Sie sicher, dass Sie auch innen return (

– Quadratmeter

10. Juli 2019 um 0:19 Uhr

Sandeep Amarnath

Implementierung ohne Lodash

<section>
      {Array.from({ length: 10 }, (_, i) => <span key={i}>Your text</span>)}
 </section>

Wie funktioniert das?

Array.from() wird in zwei Kontexten verwendet:

Erstellen eines Arrays aus einer Array-ähnlichen Datenstruktur. Zum Beispiel können wir eine Karte mit in ein Array umwandeln Array.from()

const map = new Map([ [1, 2], [3, 4], [4, 5] ])

console.log(Array.from(map)) //gives an array - [[1, 2], [3, 4], [4, 5]]
Erstellen eines Arrays und Ausfüllen der Werte (Dies kann praktisch sein, wenn wir ein Array mit mehr Elementen erstellen müssen)

Array.from() akzeptiert ein Objekt und eine Callback-Funktion.

Array.from({ length: 7 }, (() => 10)) // gives [10,10,10,10,10,10,10]

Wir können den Index (zweiter Parameter) innerhalb der Callback-Funktion nutzen, um eindeutige Array-Elemente bereitzustellen

Array.from({ length: 4 }, ((_, i) => i + 1)) // [1,2,3,4]

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

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

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>);
    }
}

PriyankMotivaras

Ich benutze das und funktioniert für mich.

[...Array(10)].map((elementInArray, index) => ( 
    <div key={index}>
      Text in Loop
    </div>
))

14390700cookie-checkWie man ein Element n-mal mit JSX und Lodash wiederholt

#Javascript #lodash #reagieren