Javascript &引用；意外标记，应为“预期”；当我尝试在中使用无状态函数组件进行条件呈现时

这是我的代码：

'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)

“严格使用”
从“React”导入React
从“react redux”导入{connect}
从“react bootstrap”导入{Panel，Col，Row，Well，Button}
常量购物车=（{Cart}）=>{
const cartimeslist=cart.map（cartArr=>(
{cartArr.title}
));
返回(
{cart[0]&&
(
{cartItemsList}
)
}
{！购物车[0]&&
()
}
// {
//购物车[0]？（{cartItemsList}）：（）；
// }
)
}
常量mapStateToProps=状态=>({
购物车：state.cart.cart
})
导出默认连接（MapStateTops）（购物车）

---

如您所见，仅当

cart

不是空数组时，我才尝试渲染嵌套在引导面板组件中的

cartItemsList

。但是，一旦使用条件渲染，就会出现错误“意外标记，应为”。注释掉的代码行是我尝试过的另一种选择，这给了我同样的错误。如果我消除了该条件，并仅使用

cartItemsList

渲染面板，则渲染时不会出现任何问题。只有当我添加条件时，我才会看到这个错误。我想知道是什么原因导致了这个错误的发生？

{}

需要将

JSX

放在里面，这里不需要

不带

{}

这样写：

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

返回(
购物车长度（&cart.length）？
{cartItemsList}
:
)

编写相同代码的另一种方法是：

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

if（购物车和购物车长度）
返回(
{cartItemsList}
)
返回(
)
{}
需要将
JSX
放入内部，此处不需要

不带
{}
这样写：

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

返回(
购物车长度（&cart.length）？
{cartItemsList}
:
)

编写相同代码的另一种方法是：

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

if（购物车和购物车长度）
返回(
{cartItemsList}
)
返回(
)
能否尝试将逻辑包装到
中<代码>返回（…）
能否尝试将逻辑包装在
中<代码>返回（…）

我做了一个挂起的编辑，因为您在原始post as卡中拼错了cart，但这只是一个小问题。再次为您的回答干杯。我做了一个挂起的编辑，因为您在原始post as卡中拼错了cart，但这只是一个小问题。再次为您的答案干杯