如何處理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，這是無效的，所以它保留下來，並給出最好的錯誤。