1
我尝试动态地建立一个表reactJS但有我不能解决两个问题:如何建立一个表动态
- 在GridList组件我此行
<GridRow data={data1} key={i} />
我真的不希望获取“全局”变量,而是使用发送到该方法的数据?我该怎么做呢? - 在GridRow我需要太多循环的列(如我现在做的),但我需要得到正确的单元格的值和右边不,我只是得到这个异常:
Error while rendering "GridBox" to "react1": Unable to get property 'data' of undefined or null reference
代码
var data1 = {"Columns":[{"Title":"Title1","HTMLClass":"g1_Title"},{"Title":"Title2","HTMLClass":"g2_Title"},{"Title":"Title3","HTMLClass":"g3_Title"}],"Rows":[{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]}]};
var GridRow = React.createClass({
render: function() {
if(this.props.data){
var Cell = this.props.data.Columns.map(function (column, i) {
return (
<div className={column.HTMLClass}>{this.props.data.Cells[i]}</div>
);
})
}
return (
<li>{Cell}</li>
);
}
});
var GridHead = React.createClass({
render: function() {
if(this.props.data){
var Cell = this.props.data.Title;
var HtmlClass = this.props.data.HTMLClass;
}
return (
<div className={HtmlClass}>{Cell}</div>
);
}
});
var GridList = React.createClass({
render: function() {
if(this.props.data){
var Header = this.props.data.Columns.map(function (columns) {
return (
<GridHead data={columns} />
);
});
var Row = this.props.data.Rows.map(function (data, i) {
return (
<GridRow data={data1} key={i} />
);
});
}
return (
<ul>
<li>{Header}</li>
{Row}
</ul>
);
}
});
var GridBox = React.createClass({
render: function(){
return (
<GridList data={data1} />
);
}
});
感谢您的命名抬头。但绑定?这个怎么用?它不是真的GridHead我有问题,但GridRow。 – Banshee 2015-02-10 19:11:04
我扩大了解决您评论的答案。另请注意,在为行设置键时,最好将其设置为可用作该行唯一标识符的数据属性。这样,如果您添加/删除/重新排序行,他们将不必重新渲染。 – Mark 2015-02-10 20:33:40
谢谢,你能解释更多关于独特吗?你是否认为我手工添加了id到HTML元素,并删除我这样做也手动用JavaScript而不是强迫重投?我认为,具有回归的贤惠是反应的全部意义? – Banshee 2015-02-11 07:27:00