0

我有以下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

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

所述 Line nr 和 colum 没有意义

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

4

1 回答 1

5

您需要使用匹配的结束标签或使用自结束标签来结束标签。

// 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)
            )
        );
    }
});

{在遇到after之前它是完全满足的Rows.map(function (rows)，这意味着“回到 JavaScript 表达式模式”，并且return在表达式中遇到 a，这是无效的，所以它放弃，并给出它所能提供的最佳错误。

于 2015-02-09T21:07:45.027 回答