在 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 有效，如果我删除第一个 .map 内的 return() 我可以运行第二个 .map .. .但是如果我使用这个结构并取消注释注释代码，我在我的终端中得到一个错误，说有一个 Unexpected token at group.item.map

你能提供帮助吗？

Answer 1

在反应元素的 return 中，您只能有一个父元素，其余部分包裹在其中。

例如：

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

}`

在 ReactJS 中映射和渲染子数组

Map and Render a Subarray in ReactJS

javascript

json

render

reactjs