在嵌套地图中反应原生 jsx答案

【问题标题】：React native jsx in a nested map在嵌套地图中反应原生 jsx
【发布时间】：2017-11-27 07:50:20
【问题描述】：

在嵌套地图方面需要帮助。很混乱，搞不清楚

      {
        sectorHeader.map((dutyPeriod) => (
          <Text style={Styles.heading} />
          dutyPeriod.dutyItems.map((dutyItem) => (
            <SectorCell
             flightNumber={`${dutyItem.flightLeg.scheduledFlightDesignator.airlineCode}${dutyItem.flightLeg.scheduledFlightDesignator.flightNumber}`}
             flightDate={dutyItem.flightLeg.departureTimes.scheduled.localTime}
            />
        ))))
      }

由于上一行中的 jsx，我在“dutyPeriod.dutyItems.map((dutyItem) => (”行中出现错误。当我有多个地图时，我如何拥有一个 jsx？

我得到的错误

Unexpected token, expected ,

{sectorHeader.map((dutyPeriod) => (
  <Text style={Styles.heading} />
   dutyPeriod.dutyItems.map((dutyItem) => (
   ^

【问题讨论】：

请提及您收到的确切错误消息。
我刚刚更新了帖子。
据我所知，如果您使用 react 16.0 并且没有“额外元素”，则需要在组件之间输入逗号
amage : 我无法在上面的 sn-p 中添加逗号？

标签： javascript react-native ecmascript-6 map-function

【解决方案1】：

在 jsx 代码中用 {} 包围 js 代码：

{
dutyPeriod.dutyItems.map((dutyItem) => (
        <SectorCell
         flightNumber={`${dutyItem.flightLeg.scheduledFlightDesignator.airlineCode}${dutyItem.flightLeg.scheduledFlightDesignator.flightNumber}`}
         flightDate={dutyItem.flightLeg.departureTimes.scheduled.localTime}
        />
    ))
}

【讨论】：