地圖和ReactJS

Question

渲染一個子數組我有一個構造這樣一個數據對象：

[{"groupid":"15","items":[ 
{"id":"42","something":"blah blah blah"}, 
{"id":"38","something":"blah blah blah"}]}, 
{"groupid":"7","items": 
[{"id":"86","something":"blah blah blah"}, 
{"id":"49","something":"blah blah blah"}]}] 

我試圖通過組迭代，然後通過迭代的項目，該ReactJS render()方法內。

這裏就是我想要做：

render() { 
    return(
     { this.state.dataArray.map(function(group, i) { 

      return(<Row><Col>{group.groupid}</Col></Row> 

      // { group.items.map(function(activity, j) { 
      //  return (<Row><Col>{item.id}</Col></Row>) 
      //  }, this) } 

     ) 

     }, this) } 
    ) 
} 

第一.map作品，如果我刪除return()是第一.map我可以運行第二.map內......但如果我使用這種結構並取消註釋代碼，我在終端得到一個錯誤說有一個Unexpected token at group.item.map

你能提供如何做到這一點的援助？

Answer 1

只能有單親元素和休息包裹在它的反應elememt的回報。

如：

return(
<p>Hello</p> 
<p>World</p> 
) 

給你錯誤

必須裹得像個

return( 
    <div> 
     <p>Hello</p> 
     <p>World</p> 
    </div> 
) 

像 'DIV'

`

單親包裝您的代碼

 return(
      <div> 
       <Row><Col>{group.groupid}</Col></Row> 

       { group.items.map(function(activity, j) { 
       return (<Row><Col>{item.id}</Col></Row>) 
       }, this) } 
     </div> 
    ) 

    }, this) } 
) 

}`