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

Lesezeit: 3 Minuten

Benutzeravatar von StillDead
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('<span className="busterCards">♦</span>');?

    – 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) => <span className="busterCards" key={i}>♦</span>)

    – 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

Benutzeravatar von Long Nguyen
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 => <span key=${idx} className="busterCards">♦</span>);

    – 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

Benutzeravatar von Sandeep Amarnath
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:

  1. 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]]

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

Benutzeravatar von PriyankMotivaras
PriyankMotivaras

Ich benutze das und funktioniert für mich.

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

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy