这是我的代码:
'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)
如您所见,仅当
cartItemsList
不是空数组时,我才尝试渲染嵌套在引导面板组件中的cart
。但是,一旦使用条件渲染,就会出现错误“意外的令牌,预期的”。注释掉的代码行是我尝试的替代方法,它给了我同样的错误。如果我摆脱了这种情况,仅使用cartItemsList
渲染面板,则渲染时没有任何问题。只有当我添加条件时,我才会看到此错误。我想知道是什么导致此错误发生? 最佳答案
需要{}
将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>
)