JSX将元素放在JS之前

Question

我正在学习React。

我有这个

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

但是我想要类似父元素的东西，以便所有FlightCard元素都具有样式。但是，当我将其包装在另一个元素中时，出现错误消息'flight'未定义'。

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

我还有什么其他选择？

Answer 1

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

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

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

Answer 2

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

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