Wie kann man Werte von einem Json in React ziehen?

Question

Ich versuche etwas Ähnliches zu diesem Angular Code zu schreiben, aber React zu verwenden. Ich bin sehr neu zu reagieren und kann es nicht herausfinden.

Ich habe eine Json, die Datenfelder und ein Feld namens Klassen speichert. Ich möchte in der Lage sein, die Klassen in JSON-Feldern zu ziehen, um sie an jede Zeile anzuhängen. Dies ist die kantige Art, die ich in der Vergangenheit erfolgreich gemacht habe.

<tr ng-repeat="row in vm.widget10.table.rows"> 
    <td ng-repeat="cell in row"> 
      <span class="{{cell.classes}}"> 
       {{cell.value}} 
      </span> 
    </td> 
</tr> 

mit einem json strukturiert auf diese Weise

{ 
    "widget10": { 
    "title": "Table Details", 
    "table": { 
     "columns": [{ 
       "title": "Item Name" 
      }, 
      { 
       "title": "Some Data" 
      }, 
      { 
       "title": "Other Data ($)" 
      }, 
      { 
       "title": "Visual Data (%)" 
      }, 
      { 
       "title": "Profit/Loss ($)" 
      }, 
      { 
       "title": "Profit/Loss (%)" 
      } 
     ], 
     "rows": [ 
      [{ 
        "value": "Data Field One", 
        "classes": "text-boxed m-0 deep-orange-bg white-fg", 
        "icon": "" 
       }, 
       { 
        "value": "$14,880.00", 
        "classes": "text-bold", 
        "icon": "" 
       }, 
       { 
        "value": "$14,000.00", 
        "classes": "", 
        "icon": "" 
       }, 
       { 
        "value": "%94.08", 
        "classes": "red-fg", 
        "icon": "trending_down" 
       }, 
       { 
        "value": "$880.00", 
        "classes": "", 
        "icon": "" 
       }, 
       { 
        "value": "%5.92", 
        "classes": "", 
        "icon": "" 
       } 
      ] 
     ] 
    } 
} 

In meiner reagieren Komponente render() Ich habe so etwas wie dies:

<TableBody 
    displayRowCheckbox={this.state.showCheckboxes} 
    deselectOnClickaway={this.state.deselectOnClickaway} 
    showRowHover={this.state.showRowHover}> 
     {statsData.map((row, index) => (
      <TableRow key={index}> 
       <TableRowColumn><span style={{backgroundColor:"{statsData.bgColor[index]}"}}>{row.name}</span></TableRowColumn> 
       <TableRowColumn>{row.data}</TableRowColumn> 
       <TableRowColumn>{row.o_data}</TableRowColumn> 
       <TableRowColumn>{row.v_data}</TableRowColumn> 
       <TableRowColumn>{row.o_pl}</TableRowColumn> 
       <TableRowColumn>{row.v_pl}</TableRowColumn> 
      </TableRow> 
     ))} 
</TableBody> 

und eine json auf diese Weise (in der Komponente)

const statsData = [ 
    { 
     name: "Data Field One", 
     bgColor: "red", 
     data: "$14,880.00", 
     o_data: "$14,000.00", 
     v_data: "%94.08", 
     o_pl: "$880.00", 
     v_pl: "%5.92", 
    }, 
    { 
     name: "Data Field Two", 
     bgColor: "blue", 
     data: "$14,880.00", 
     o_data: "$14,000.00", 
     v_data: "%94.08", 
     o_pl: "$880.00", 
     v_pl: "%5.92", 
    }, 
    { 
     name: "Data Field Three", 
     bgColor: "yellow", 
     data: "$14,880.00", 
     o_data: "$14,000.00", 
     v_data: "%94.08", 
     o_pl: "$880.00", 
     v_pl: "%5.92", 
    } 
]; 

Bis jetzt th Die Daten kommen gut durch, aber ich kann nicht herausfinden, wie man bgColor entweder als backgroundColor-Stil oder als Klasse verwendet.

Jede Hilfe wird geschätzt.

Dank

Answer 1

Entfernen Sie die Zitate aus um den Wert für backgroundColor und von dem row Iteratorvariable (basierend auf dem JSON Sie klebt) lesen:

<span style={{backgroundColor: row.bgColor}}>{row.name}</span>