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

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 运行它。

规定的 Line 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)之后的{，这意味着“回到JavaScript表达式模式”，它才完全满足，它在表达式中遇到return，这是无效的，所以它保释，并给出最好的错误。