"Unexpected token, expected ," 当我尝试进行条件渲染以与无状态功能组件做出反应时

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 不是空数组时，我才尝试渲染嵌套在 bootstrap 面板组件中的 cartItemsList。但是，一旦我使用条件渲染，我就会收到错误 "Unexpected token, expected ,"。注释掉的代码行是我尝试过的替代方法，它给了我同样的错误。如果我摆脱这种情况，只使用 cartItemsList 渲染面板，它就可以毫无问题地渲染。只有当我添加条件时才会看到此错误。我想知道是什么导致了这个错误的发生？

Answer 1

{}需要把js expressions放在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>
)

"Unexpected token, expected ," 当我尝试进行条件渲染以与无状态功能组件做出反应时

"Unexpected token, expected ," when I try to do conditional rendering in react with stateless functional component

javascript

conditional

reactjs