JSX-Objektdarstellung von Zeilen

Question

Wenn ich in der Lage sein möchte, mehrere Zeilen wie unten von einem Funktionsaufruf auf einmal unter Verwendung JSX zu rendern.

Wie sieht der Code für ObjectRow in rows.push(<ObjectRow />); aus?

var rows = []; 
for (var i=0; i < numrows; i++) { 
    rows.push(<ObjectRow />); 
} 
return <tbody>{rows}</tbody>; 

Ich möchte jede Zeile wie folgt aussehen:

<tr> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{5}</td>     
      <td className={lastClass}>{5}</td> 
      <td className={changeClass}>{5} <span className={iconClass} aria-hidden="true"></span></td> 
      <td>{5}</td> 
      <td>{5}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
</tr> 

Schließlich ich alle diese Zeilen machen möchten:

var StockRow = React.createClass({ 

    things: function(){ 
     var rows = []; 
     for (var i=0; i < numrows; i++) { 
      rows.push(<ObjectRow />); 
     } 
     return <tbody>{rows}</tbody>; 
    }, 
... 

Answer 1

es mehrere Möglichkeiten, dies zu tun. Außerdem müssen Sie Daten (als Requisiten an ObjectRow) senden, um für jede Zeile auch anzuzeigen. Ich habe eine Geige dafür geschaffen.

In der Geige unten habe ich Tabellenköpfe und einige weitere Daten hinzugefügt, so dass die Spalten klar unterscheidbar sind. Variable tableData enthält Daten vom Server zurück.

https://jsfiddle.net/birjubaba/cby5pxcc/3/