Question

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

在GridList组件中，我得到了这一行<GridRow data={data1} key={i} />我真的不想获取“全局”var，而是使用发送到方法的数据？我该怎么做？
在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中，常规变量名称应以小写字母开头（如上图所示），而组件名称应以大写字母开头。

如何动态构建表

1 个答案: