如何处理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变量到其被分割到Columns（对于报头）和行的GridList。问题是，我会在运行时出现以下异常：

In file "~/Scripts/Grid.jsx": Parse Error: Line 30: Unexpected token return (at line 30 column 6) Line: 52 Column:3

我从Visual Studio 2013与ReactJS内运行此。

的规定系NR和科拉姆是没有意义的

我试着去渲染基于元数据（列），并从服务行数据的表。

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，这是无效的，所以它保留下来，并给出最好的错误。