React.js создает таблицу с динамическим количеством строк с редактируемым столбцом

Question

Я пытаюсь создать таблицу react.js, которая синхронизируется с картой буклета. У меня есть эти данные, и я могу правильно получить данные, но я не могу правильно создать таблицу. Я могу видеть заголовки, потому что они жестко закодированы, но я не могу видеть строки. У меня также есть изображение, чтобы объяснить данные в точках console.log() в коде. Вот код:

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

Здесь вы можете увидеть console.log(tabledata) линии в полном объеме, а также первый объект в console.log(rows)

Я хотел бы увидеть что-то вроде на картинке ниже. Пожалуйста, обратите внимание, я хочу, чтобы колонки зон не могу редактироваться входом, но население редактируемое:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> не кажется допустимым Реагировать компонент для меня. В нижнем регистре <tr> указано, что это не настраиваемый компонент, а представляет собой стандартную строку таблицы HTML. <tr> элементы требуют <td> или <th> элементов внутри них, например:

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

Вы могли бы извлечь это в пользовательский элемент:

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

Кроме того, не забудьте дать элементы сгенерированные изнутри map/foreach Функция a 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