React.js che crea una tabella con una quantità dinamica di righe con una colonna modificabile

Question

Sto provando a creare una tabella react.js che si sincronizza con una mappa di leaflet. Ho questi dati e sono in grado di ottenere i dati correttamente, ma non riesco a creare una tabella correttamente. Sono in grado di vedere le intestazioni perché sono hardcoded, ma non riesco a vedere le righe. Ho anche una foto per spiegare i dati nei punti console.log() nel codice. Ecco il codice:

/* 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> 
    ); 
    } 
}); 

Qui potete vedere la linea console.log(tabledata) in pieno così come il primo oggetto in console.log(rows)

mi piacerebbe vedere qualcosa di simile l'immagine qui sotto. Si prega di notare che voglio colonna Zone di non essere inseriti modificabile, ma la popolazione di essere modificabile:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> non sembra una valida componente Reagire a me. Il minuscolo <tr> indica che questo non è un componente personalizzato, ma rappresenta una riga di tabella HTML standard. <tr> elementi richiedono <td> o <th> elementi al loro interno, per esempio:

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

Si potrebbe estrarre questo in un elemento personalizzato:

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)); 

Inoltre, non dimenticare di dare elementi generati dall'interno di un map/foreach funzione un attributo key.

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