Herausforderung: Rendern Einer Datensammlung
Aufgabe: Zeige eine Produktliste
Lassen Sie uns die vom Backend erhaltenen Daten verarbeiten und sicherstellen, dass sie ordnungsgemäß in Listenform gerendert werden.
Die Aufgabe ist:
Verwenden Sie die
map()
-Methode, um ein Array von Waren zu rendern.Stellen Sie sicher, dass die notwendigen Lücken gefüllt werden:
h2
muss den Namen der Ware enthalten (name
-Eigenschaft);p
muss die Beschreibung der Ware enthalten (description
-Eigenschaft);span
muss den String "Preis:" und den Preis der Ware enthalten (price
-Eigenschaft).
Verwenden Sie die Methode
map()
, um über das Arrayprops.goods
zu iterieren.Stellen Sie sicher, dass Sie die
key
-Eigenschaft des<li>
-Elements auf einen eindeutigen Wert setzen, wie z.B. die id-Eigenschaft des Elements.Verwenden Sie innerhalb jedes
<li>
-Elements die folgenden Elemente:Ein
<h2>
-Element, um den Namen des Produkts anzuzeigen. Greifen Sie auf den Namen des aktuellenitem
zu;Ein
<p>
-Element, um die Beschreibung des Produkts anzuzeigen. Greifen Sie auf die Beschreibung des aktuellenitem
zu;Ein
<span>
-Element, um die Zeichenfolge "Preis:" gefolgt vom Preis des Produkts anzuzeigen. Greifen Sie auf den Preis des aktuellenitem
zu.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen