如何动态构建 table

Question

我尝试使用 reactJS 动态构建 table 但有两个我无法解决的问题：

在 GridList 组件中我得到了这一行 <GridRow data={data1} key={i} /> 我真的不想获取 "global" 变量而是使用发送到方法中的数据？我该怎么做？
在 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} />
        );
    }
});

Answer 1

你只能引用传递给map函数的东西，除非你使用bind，它维护this的实例，所以它在组件内和map内使用的函数是一样的.这将允许您在映射函数中使用 this.props。

由于 header 使用的是直接传递给 map 中的函数的内容，因此不一定需要绑定。在 row 中，为了访问 this.props，必须绑定函数。例如，如果您有 somedata，您希望在 this.props 内访问：

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={this.props.somedata} key={i} />
    );
}.bind(this));

请注意，在 JSX 中，常规变量名称应以小写字母开头（如上文 header），而组件名称应以大写字母开头。

如何动态构建 table

How to build a table dynamically

javascript

reactjs

react-jsx