Reactjs JSX将元素放在JS之前

我正在学习如何反应

我有的是这个

return (
    flights.map(flight => <FlightCard info={flight}/>)
)

但是我想要一个类似于父元素的东西，这样所有FlightCard元素都将被样式化。但是，当我将消息“flight”包装到另一个元素中时，消息“flight”未定义，出现了一个错误

return (
    <div>
        flights.map(flight => <FlightCard info={flight}/>
    </div)
)

---

还有什么其他选项吗？

您忘记将其包装在花括号内，因此编译器尝试查找{flight}变量，但它没有初始化，因为整行被视为字符串

return (
   <div>
      {flights.map(flight => <FlightCard style={cardStyle} info={flight} />)}
   </div>
)

---

即使{cardStyle}发生在{flight}之前，它也不会引发任何错误，因为您以前可能已经初始化过cardStyle。

您忘记将其包装在花括号中，因此编译器尝试查找{flight}变量，但它没有初始化，因为整行被视为字符串

return (
   <div>
      {flights.map(flight => <FlightCard style={cardStyle} info={flight} />)}
   </div>
)

---

即使{cardStyle}发生在{flight}之前，它也不会引发任何错误，因为您以前可能已经初始化了cardStyle。

如果您使用的是react 16，则可以使用react.Fragment作为父元素

<React.Fragment>
    {myArray.map()...}
</React.Fragment>

---

如果您使用的是react 16，那么可以使用react.Fragment作为父元素

<React.Fragment>
    {myArray.map()...}
</React.Fragment>

---

你的回答更像是一条评论，你可以在下面的问题下发表：我读到关于React.Fragment的文章，它在DOM中等于并分解为零，但我认为在这种情况下，我不能使用它们，因为我想有一个父元素，这样我就可以设计我的FlightCard元素：你的回答更像是一个评论，你可以在下面的问题下发表：我读到关于React.Fragment的内容，它等于并在DOM中分解为零，但我想在这种情况下我不能使用它们，因为我想有一个家长，这样我就可以设计我的FlightCard元素：我也有一个印象，就是把它用花括号括起来，但一旦我尝试了，我会得到另一个error@UnknownJoe是的，我们忘了一起关闭地图功能。我编辑了我的答案，看看吧。我也有过这样的印象，把它用花括号括起来，但一旦我尝试了，我会得到另一个答案error@UnknownJoe是的，我们忘了一起关闭地图功能。我编辑了我的答案，看看吧。