Erstellen Sie HTML aus for-Schleife in JSX mit React.js

Question

Ich möchte HTML in for-Schleife in JSX Kiste. Hier ist, was mein Versuch aussehen mag

function renderTemplates(templates){ 
      var html = []; 
      var templateDiv = []; 
      var count = 0; 
      for(var identifier in templates){ 
      if(templates.hasOwnProperty(identifier)){ 
       var templateDetails = templates[identifier]; 
       if(count == 0){ 
        html.push(<Row>); 
       } 
       cols = <Col md={6}>ff 
          </Col>; 
       html.push(cols); 
       if(count == 0){ 
         html.push(</Row>); 
       } 
       count = (count === 1)?0:1; 
      } 
     } 
     return html; 
    } 

Ich weiß, die falsche Syntax ist, kann aber nicht herausfinden, wie es zu tun. Grundsätzlich habe ich einige Daten und möchte HTML in Mode erstellen, dass 2 Divs horizontal in 1 Zeile liegt.

Answer 1

Zwei Dinge springen auf mich, wenn ich Ihren Code ansehe.

Die erste besteht darin, dass Sie ein Array von React-Komponenten aus der renderTemplates-Funktion zurückgeben. Dies kann in Ordnung sein, abhängig davon, wie Sie die Ausgabe verwenden. Der Schlüssel zur Erinnerung ist, dass der Rückgabewert der Renderfunktion Ihrer Komponente eine einzelne React-Komponente sein muss (z. B. wenn Sie dieses Ergebnis in ein anderes JSX-Tag einschließen).

Zweitens scheint es so zu sein den Datenfluss von der Komponente auf oberster Ebene nach unten nicht zulassen; insbesondere, dass Sie die Row-Komponente nicht verwenden, um Daten an Column-Komponenten zu übergeben. Das macht das Schreiben Ihrer Schleife so schwierig. Anstatt zu versuchen, sowohl Zeilen als auch Spalten zu verwalten, müssen Sie nur die Daten, die für eine einzelne Zeile benötigt werden, an eine Zeilenkomponente übergeben. Die Row-Komponente übergibt dann alle Daten an eine Column-Komponente. Dies macht das Jonglieren von öffnenden und schließenden Tags überflüssig und vereinfacht den Code insgesamt.

Im Folgenden finden Sie eine Beispielimplementierung von dem, was ich beschrieben habe. Ich verwende tabellenbezogene Tags zum Rendern, aber Sie können divs oder was auch immer für Sie am geeignetsten ist. Zum Zeitpunkt des Schreibens gibt es nicht viele Informationen darüber, was in Templates enthalten ist. Daher habe ich ein dummer kleines Beispiel für die Verwendung erstellt.

var KvpColumn = React.createClass({ 
    render: function() { 
     return <td>{this.props.kvp.key}: {this.props.kvp.value}</td>; 
    } 
}); 

var KvpRow = React.createClass({ 
    render: function() { 
     return (
      <tr> 
      {this.props.items.map(function(item) { 
       return <KvpColumn key={item.key} kvp={item}/>; 
      })} 
      </tr> 
     ); 
    } 
}); 

var ObjectIDsTable = React.createClass({ 
    render: function() { 
     var templates = this.props.templates; 

     var propertyNames = Object.getOwnPropertyNames(templates); 
     var group = []; 
     var rows = []; 
     var cols = Number(this.props.cols) || 2; 

     for(var i = 0; i < propertyNames.length; i++) { 
      var key = propertyNames[i]; 

      group.push({key: key, value: templates[key]}); 
      if(group.length === cols) { 
       rows.push(<KvpRow key={group[0].key} items={group}/>); 
       group = []; 
      } 
     } 

     if(group.length > 0) { // catch any leftovers 
      rows.push(<KvpRow key={group[0].key} items={group}/>); 
     } 

     return <table>{rows}</table>; 
    } 
});  

// something silly as a simple example 
var templates = { a: 'b', c: 'd', e: 'f', g: 'h', i: 'j' };  
React.render(<ObjectIDsTable templates={templates} cols="2"/>, document.getElementById('app')); 

Wenn Sie Zugriff auf Unterstreichungs oder lodash, können Sie die Logik in ObjectIDsTable ein bisschen weiter vereinfachen (und vermeiden Schleifen zusammen zu schreiben!):

var ObjectIDsTable = React.createClass({ 
    render: function() { 
     var templates = this.props.templates; 

     var rows = _.chain(Object.getOwnPropertyNames(templates)) 
      .map(function(key) { return { key: key, value: templates[key] }; }) 
      .chunk(this.props.cols || 2) 
      .map(function(group) { return <KvpRow key={group[0].key} items={group}/>; }) 
      .value(); 

     return <table>{rows}</table>; 
    } 
}); 

Sie können dies auf Plunker in Aktion .

Answer 2

Auf einem recent project habe ich etwas ähnliches, aber mit Tabellenzeilen/Spalten.

var TableBody = React.createClass({ 
    render: function(){ 
    var columns = this.props.columns; 
    var data = this.props.data; 

    return (
     <tbody> 
     {data.map(function(item, idx){ 
      return <TableRow key={idx} data={item} columns={columns}/>; 
     })} 
     </tbody> 
    ) 
    } 
}); 

Meine <TableRow /> Komponente wie folgt aussieht:

var TableRow = React.createClass({ 
    render: function() { 
    var columns = this.props.columns; 
    var data = this.props.data; 
    var td = function(item) { 

     return columns.map(function(c, i) { 
      return <td key={i}>{item[c]}</td>; 
     }, this); 
     }.bind(this); 

    return (
     <tr key={data}>{ td(data) }</tr> 
    ) 
    } 
});