React.js erstellt eine Tabelle mit einer dynamischen Anzahl von Zeilen mit einer editierbaren Spalte

Question

Ich versuche, eine react.js-Tabelle zu erstellen, die mit einer Broschüre Map synchronisiert. Ich habe diese Daten und ich bin in der Lage, die Daten richtig zu bekommen, aber ich kann eine Tabelle nicht korrekt erstellen. Ich kann die Header sehen, weil sie fest codiert sind, aber ich kann die Zeilen nicht sehen. Ich habe auch ein Bild, um die Daten an den console.log() Punkten im Code zu erklären. Hier ist der Code:

/* Table React Component */ 
var TABLE_CONFIG = { 
    sort: { column: "Zone", order: "desc" }, 
    columns: { 
    col1: { name: "Zone", filterText: "", defaultSortOrder: "desc" }, 
    col2: { name: "Population", filterText: "", defaultSortOrder: "desc" } 
    } 
}; 

var Table = React.createClass({ 
    getInitialState: function() { 
    var tabledata = []; 
    var length = _.size(testJSON.zones); 
    for(i = 0; i < length; i++) { 

     var name = _.keys(testJSON.zones)[i]; 

     var population = testJSON.zones[name].population.value; 
     if(name == "default") { 
     population = testJSON.zones[name].population.default.value; 
     } 

     tabledata[i] = {name, population}; 
    } 
    console.log(tabledata); 
    return {zones: tabledata}; 
    }, 

    render: function() { 
    var rows = []; 
    this.state.zones.forEach(function(zone) { 
     rows.push(<tr Population={zone.population} Zone={zone.name} />); 
    }.bind(this)); 
    console.log(rows); 
    return (
     <table> 
      <thead> 
       <tr> 
        <th>Zone</th> 
        <th>Population</th> 
       </tr> 
      </thead> 
      <tbody>{rows}</tbody> 
     </table> 
    ); 
    } 
}); 

Hier können Sie die console.log(tabledata) Linie in vollem Umfang sehen sowie das erste Objekt in console.log(rows)

Ich mag würde unten etwas wie das Bild zu sehen. Bitte beachten Sie, ich zu Zone Spalt will nicht bearbeitet eingegeben werden, aber die Bevölkerung editierbar sein:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> nicht wie ein Reagieren Komponente mir gültig scheint. Der Kleinbuchstabe <tr> zeigt an, dass dies keine benutzerdefinierte Komponente ist, sondern eine Standard-HTML-Tabellenzeile darstellt. <tr> Elemente erfordern <td> oder <th> Elemente in ihnen, zum Beispiel:

var rows = []; 
this.state.zones.forEach(function(zone) { 
    rows.push(
     <tr /> 
     <td><SomePopulationComponent /></td> 
     <td><SomeZoneComponent /></td> 
     </tr> 
    ); 
}.bind(this)); 

Sie könnten dies in einem benutzerdefinierten Element extrahieren:

var CustomRow = React.createClass({ 
    render: function() { 
     return (
      <tr> 
       <td>{this.props.Population}</td> 
       <td>{this.props.Zone}</td> 
      </tr> 
     ); 
    } 
}); 

// ... 

var rows = []; 
this.state.zones.forEach(function(zone) { 
    rows.push(<CustomRow Population={zone.population} Zone={zone.name} />); 
}.bind(this)); 

Auch vergessen Sie nicht Elemente von innen ein map erzeugt geben/foreach Funktion ein key Attribut.

Answer 2

I have made this dynamic data table with dynamic rows and columns editable 


class App extends React.Component { 
constructor(props){ 
     super(props); 
this.state = { 
     data: [ 
     {'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6'}, 
     {'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}, 
     {'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'} 
], 
errorInput:'' 
}; 
    this.submitStepSignupForm = this.submitStepSignupForm.bind(this); 
    this.appendColumn = this.appendColumn.bind(this); 
// this.editColumn = this.editColumn.bind(this); 

render(){ 
     let tableStyle = { 
      align:"center" 
     }; 
     let list = this.state.data.map(p =>{ 
      return (
       <tr className="grey2" key={p.id}> 
        {Object.keys(p).filter(k => k !== 'id').map(k => { 
          return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true" 
          value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>); 
        })} 
       </tr> 
      ); 
     }); 
     return (
      <fieldset className="step-4"> 
       <div className="heading"> 
        <h3>Tell us about your schedule</h3> 
        <p>Dynamic Data Table by Rohan Arihant </p> 
       </div> 
       <div className="schedule padd-lr"> 
        <table cellSpacing="3" id="mytable" style={tableStyle}> 
          <tbody>{list}</tbody> 
        </table> 

       </div> 


      </fieldset> 
    ); 
} 

}

https://codepen.io/rohanarihant/pen/qmjKpj