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

在反应元素的返回中，您只能将单个父元素和rest包含在其中。

例如：

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

给你错误

必须像

一样包裹

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

将您的代码包装在单个父母中，例如＆＃39; div＆＃39;

`

      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中映射和渲染子数组

1 个答案: