如何动态构建表

How to build a table dynamically

本文关键字：构建 动态 何动态      更新时间：2023-09-26

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

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

您只能引用传递到映射中函数中的内容，除非您使用bind，它维护this的实例，以便它在组件和映射中使用的函数中是相同的。这将允许您在映射函数中使用this.props。

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

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中，常规变量名称应该以小写字母开头（如上面的标题所示），而组件名称应该以大写字母开头。

相关文章：