React.js tạo bảng có số lượng hàng động với cột có thể chỉnh sửa

Question

Tôi đang cố gắng tạo bảng react.js đồng bộ hóa với bản đồ tờ rơi. Tôi có dữ liệu này và tôi có thể lấy dữ liệu đúng cách, nhưng tôi không thể tạo bảng một cách chính xác. Tôi có thể thấy các tiêu đề bởi vì chúng được mã hóa cứng, nhưng tôi không thể nhìn thấy các hàng. Tôi cũng có một bức tranh để giải thích dữ liệu tại các điểm console.log() trong mã. Đây là mã:

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

đây bạn sẽ nhìn thấy dòng console.log(tabledata) đầy đủ cũng như các đối tượng đầu tiên trong console.log(rows)

Tôi muốn nhìn thấy một cái gì đó giống như hình dưới đây. Xin lưu ý tôi muốn Zone cột để không bị đầu vào có thể chỉnh sửa, nhưng dân số là có thể chỉnh sửa:

Answer 1

<tr Population={zone.population} Zone={zone.name} /> không có vẻ như một giá trị Phản ứng thành phần đối với tôi. Chữ thường <tr> cho biết rằng đây không phải là thành phần tùy chỉnh, nhưng biểu thị hàng bảng HTML chuẩn. <tr> yếu tố đòi hỏi <td> hoặc <th> yếu tố bên trong chúng, ví dụ:

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

Bạn có thể trích xuất này thành một yếu tố tùy chỉnh:

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

Ngoài ra, đừng quên để cung cấp cho các yếu tố tạo ra từ bên trong một map/foreach hoạt động với thuộc tính 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