Wie kann ich Durchlaufen Tabellenzeilen und-Zellen in Reactjs
Ich bin ziemlich neu Reactjs und ich habe eine Komponente, die Lasten json aus meiner db, die wie folgt aussieht
Array[2]
0: Object
_id: "56cf587fe46adb3b8960afe2"
price: 2000
title: "ps3"
url: "www.google.com"
__proto__: Object
1: Object
_id: "56db2bd434df9046e0643d22"
price: 499
title: "HENRIKSDAL"
url: "http://www.ikea.com/se/sv/catalog/products/S59847817/"
__proto__: Object
length: 2
__proto__: Array[0]
was ich will zu tun ist, laden Sie die Daten auf den Tisch, das aussieht wie dieses
//start of loop
<tr>
<td className="col-sm-8 col-md-6">
<div className="media">
<div className="media-body">
<h4 className="media-heading"><a href="#">Product name</a></h4>
</div>
</div></td>
<td className="col-sm-1 col-md-1" styles="text-align: center">
<input type="number" name="quantity" min="1" max="10" className="form-control"/>
</td>
<td className="col-sm-1 col-md-1 text-center"><strong>500:-</strong></td>
<td className="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td className="actions" data-th="">
<button className="btn btn-info btn-sm"><i className="fa fa-refresh"></i></button>
<button className="btn btn-danger btn-sm"><i className="fa fa-trash-o"></i></button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td className="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
//end of loop
Aber ich weiß nicht, wie das array Durchlaufen, so wird es eine Tabellenzeilen-für jedes Objekt im array. Irgendwelche Vorschläge?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie map-array und übergeben Sie die Daten über die html -
Können Sie
map
- Methode (verfügbar in Prototyp-Array).Die Iteration kann so einfach sein wie diese...
Arbeiten Fiddle
https://jsfiddle.net/zwdjmozn/1/
Dies ist eine Erweiterung der @Andreyco Antwort-wo eine eigene Vorlage definiert ist, aber in meinem Fall bin ich durch das verweisen auf die JSX-template innerhalb der Karte nennen (
<Row />
Sehen JSFiddle