【问题标题】:JSX Put Element before JSJSX 将元素放在 JS 之前
【发布时间】:2018-12-01 21:51:24
【问题描述】:

我正在学习 React。

我有的是这个

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

但我想要一个类似于父元素的东西,以便所有 FlightCard 元素都具有样式。但是当我将它包装在另一个元素中时,我收到消息 'flight' is not defined' 的错误。

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

我还有什么其他选择?

【问题讨论】:

    标签: reactjs jsx


    【解决方案1】:

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

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

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

    【讨论】:

    • 我也有印象将它用大括号括起来,但是一旦我尝试它,我会得到另一个错误?解析错误:意外的令牌,预期的“,” - 在第二个括号后面
    • @UnknownJoe 是的,我们忘了一起关闭map 函数。我已经编辑了我的答案,请查看。
    【解决方案2】:

    如果你使用 react 16,你可以使用 React.Fragment 作为你的父元素。

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

    【讨论】:

    • 您的回答更像是您可以在问题下发表的评论:)
    • 我读到 React.Fragment 等于 > 并在 DOM 中溶解成任何东西,但我认为在这种情况下我不能使用它们,因为我想有一个父母,这样我就可以为我的 FlightCard 元素设置样式:)
    猜你喜欢
    • 1970-01-01
    • 2017-08-27
    • 2020-02-24
    • 2018-07-14
    • 1970-01-01
    • 1970-01-01
    • 2021-07-10
    • 1970-01-01
    • 2021-09-07
    相关资源
    最近更新 更多