當我嘗試與無狀態功能組件進行條件渲染時，出現“預期的意外令牌”

Question

這是我的代碼：

'use strict'

import React from 'react'
import { connect } from 'react-redux'
import { Panel, Col, Row, Well, Button } from 'react-bootstrap'

const Cart = ({ cart }) => {

  const cartItemsList = cart.map(cartArr => (
    <Panel key={cartArr.id}>
      <Row>
        <Col xs={12} sm={4}>
          <h6>{cartArr.title}</h6>
        </Col>
      </Row>
    </Panel>
  ));

  return (
    { cart[0] &&
      (<Panel header="Cart" bsStyle="primary">
        {cartItemsList}
      </Panel>)
    }
    { !cart[0] &&
      (<div></div>)
    }
    // {
    //   cart[0] ? (<Panel header="cart" bsStyle="primary">{cartItemsList}</Panel>) : (<div></div>);
    // }
  )
}

const mapStateToProps = state => ({
  cart: state.cart.cart
})

export default connect(mapStateToProps)(Cart)

如您所見，僅當cart不是一個空數組時，我才嘗試渲染嵌套在引導面板組件內的cartItemsList 。 但是，一旦我使用條件渲染，就會出現錯誤“意外的令牌，預期的”。 注釋掉的代碼行是我嘗試的替代方法，它給了我同樣的錯誤。 如果我擺脫了這種情況，只是使用cartItemsList渲染面板，那么渲染就沒有任何問題。 只有當我添加條件時，我才會看到此錯誤。 我想知道是什么導致此錯誤發生？

Answer 1

將JS表達式放在JSX內需要{} ，在這里不是必需的。

不用{}這樣寫：

return (
    cart && cart.length ?
        <Panel header="Cart" bsStyle="primary">
            {cartItemsList}
        </Panel>
    :
        <div>
        </div>
)

編寫相同代碼的另一種方法是：

if(cart && cart.length)
    return(
        <Panel header="Cart" bsStyle="primary">
            {cartItemsList}
        </Panel>
    )
return(
    <div>
    </div>
)