Question

我有以下ReactJS代码：

var data1 = {"Columns":["Title1","Title2","Title3"],"Rows":[{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]}]};


var GridRow = React.createClass({
    render: function() {
        if(this.props.data){

        }
        return (
            <div>Text</div>
        );
    }
});


var GridList = React.createClass({
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    <GridRow data={columns}>
                );
            });
            var Row = this.props.data.Rows.map(function (rows) {
                return (
                    <GridRow data={rows}>
                );
            });
        }
        return (
            <ul>
                <li>{Header}</li>
                <li>{Row}</li>
            </ul>
        );
    }
});


var GridBox = React.createClass({
    render: function(){
        return (
            <GridList data={data1} />
        );
    }
});

我正在尝试将data1变量传递给GridList，其中它分为Columns（对于标题）和行。问题是我在运行时遇到以下异常：

在文件“〜/ Scripts / Grid.jsx”中：解析错误：第30行：意外的令牌返回（第30行第6行）行：52列：3

我在Visual Studio 2013中使用ReactJS运行它。

陈述的行nr和colum毫无意义

我试图根据服务中的元数据（列）和行数据来呈现表。

Answer 1

您需要使用匹配的结束标记或使用自闭标记来关闭标记。

// ERROR
<GridRow data={rows}>

// OK
<GridRow data={rows}></GridRow>

// Best
<GridRow data={rows} />

^{错误消息非常有帮助。}

此外，在创建节点数组时，给它们提供密钥是很好的。

Rows.map(function(row, i){
    return <GridRow data={rows} key={i} />;
});

我玩了更多，而且奇怪的是来自JSX接受开始标记与<，{或}之间的任何内容作为原始文本。如果你做了这样的事情：

var GridList = React.createClass({
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    <GridRow data={columns}>
                );
            });
            var Row = this.props.data.Rows.map(function (rows) </GridRow>
            )});
        }
        return (
            <ul>
                <li>{Header}</li>
                <li>{Row}</li>
            </ul>
        );
    }
});

它会高兴地输出这个：

var GridList = React.createClass({displayName: "GridList",
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    React.createElement(GridRow, {data: columns}, 
                ");" + ' ' +
            "});" + ' ' +
            "var Row = this.props.data.Rows.map(function (rows) ")
            )});
        }
        return (
            React.createElement("ul", null, 
                React.createElement("li", null, Header), 
                React.createElement("li", null, Row)
            )
        );
    }
});

在{之后遇到Rows.map(function (rows)之前它完全满足，这意味着＆＃34;回到JavaScript表达模式＆＃34;，它会遇到{{1}在一个表达式中，它是无效的，因此它会失效，并且它会给出最好的错误。

如何处理ReactJS中的复杂对象？

1 个答案: