Javascript React.js创建具有动态行数和可编辑列的表

我正在尝试创建一个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>
      );
  }
});

/*表反应组件*/
变量表配置={
排序：{列：“区域”，顺序：“描述”}，
栏目：{
col1:{name:“Zone”，filterText:，defaultSortOrder:“desc”}，
col2:{name:“Population”，filterText:，defaultSortOrder:“desc”}
}
};
var Table=React.createClass({
getInitialState:函数（）{
var tabledata=[]；
var length=u2;.size（testJSON.zones）；
对于（i=0；i

在这里，您可以看到完整的

console.log（tabledata）

行以及

console.log（rows）

我想看看下面的图片。请注意，我希望分区列不可编辑输入，但人口可编辑：

对我来说似乎不是一个有效的React组件。小写的

表示这不是一个自定义组件，而是一个标准的HTML表格行<代码>元素需要

或

元素，例如：

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

var行=[]；
this.state.zones.forEach（函数（区域）{
推(
);
}.约束（这个）；

您可以将其提取到自定义元素中：

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

var CustomRow=React.createClass({
render:function（）{
返回(
{this.props.Population}
{this.props.Zone}
);
}
});
// ...
var行=[]；
this.state.zones.forEach（函数（区域）{
rows.push（）；
}.约束（这个）；

---

另外，不要忘记为

映射

/

foreach

函数中生成的元素赋予

键

属性。

我已使这个动态数据表具有可编辑的动态行和列

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{'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:'sunday'，2:'1'，3:'2'，4:'3'，5:'4'，6:'5'，7:'6'}，
{'id'：4,1:'周三'，2:'1'，3:'2'，4:'3'，5:'4'，6:'5'，7:'6'}，
{'id'：5,1:'星期四'，2:'一'，3:'二'，4:'三'，5:'四'，6:'五'，7:'六'，
{'id'：6,1:'FRIDAY'，2:'1'，3:'2'，4:'3'，5:'4'，6:'5'，7:'6'}
],
错误输入：“”
};
this.submitStepSignupForm=this.submitStepSignupForm.bind（this）；
this.appendColumn=this.appendColumn.bind（this）；
//this.editColumn=this.editColumn.bind（this）；
render（）{
让表样式={
对齐：“居中”
};
let list=this.state.data.map（p=>{
返回(
{Object.keys（p）.filter（k=>k！='id'）.map（k=>{
返回(
{p[k]}
);
})}
);
});
返回(
告诉我们你的日程安排
Rohan Arihant的动态数据表

{list}
);
}
}

---

这是一个在React中创建简单表组件的相当简洁的示例。它帮助了我。伙计！这太棒了！正是我想要的。另外，您能解释一下

suppressContentEditableWarning=“true”contentEditable=“true”

标记以及您的

editColumns（）

Legit god Blessed man.这是唯一一篇使用纯react+html的文章，似乎很有效。我相信这些都是标签的一部分，它们的意思是：编辑内容。