JSX Поместить Элемент перед JS

Question

Я изучаю React.

Вот что у меня есть

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

Но я хочу что-то вроде родительского элемента, чтобы все элементы FlightCard были стилизованы.Но я получаю сообщение об ошибке 'полет' не определен ', когда я оборачиваю его в другой элемент.

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

Какие еще варианты у меня есть?

Answer 1

Если вы используете реакцию 16, вы можете использовать React.Fragment в качестве родительского элемента.

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

Answer 2

Вы забыли заключить его в фигурные скобки, поэтому компилятор пытается найти переменную {flight}, но она не инициализируется, потому что вся строка обрабатывается как строка.

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

Даже если {cardStyle} происходит до {flight}, не выдает никакой ошибки, потому что вы, вероятно, инициализировали cardStyle раньше.