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