Question

这是我的代码。其中很大一部分位于地图内。我试图通过使用if语句来访问映射数组的第一个索引，但不知怎的，我怀疑它并不意味着以这种方式处理，更不用说我得到了一个错误。查看靠近底部的if语句。我不想使用三元组，因为我认为它会更加混乱，因为在if语句中已经有了三元组。

render() {
let { findTotal } = this,
{ receiptProducts } = this.props

if(!receiptProducts || !receiptProducts.length) return <Redirect to="/home" />
console.log(receiptProducts)
return (
  <div style={Styles.mainContainer}>
    <div style={Styles.orderWrapper}>
      <div style={Styles.promptContainer}>
        <h1>Your order is being prepared!</h1>
        <p>An email has been sent to your inbox</p>
        <p>Please print for your records</p>
      </div>
      <div style={Styles.productsWrapper}>
        {
          receiptProducts.map((product, i) => {
            let imgName = 'receipt_' + product.name.toLowerCase().replace('cbd ', '').replace('/', '  ').split(' ').slice(0,-1).join('_'),
                imgSrc = './resources/img/' + imgName + '.png'

            let productName = product.brand + " " + product.name.split(' ').slice(0, -1).join(' ')

            return (
              <div key={product.name} style={Styles.productsOuterWrapper}>
                <div style={Styles.productsOrdered}>
                  <img src={imgSrc} style={Styles.image}/>

                  <div key={product.name} style={Styles.productInfo}>
                    <h1 style={Styles.productName}>{productName}</h1>
                    <p style={Styles.chargeNotice}>This charge will appear on your bank statement as: <span style={Styles.chargeNoticeInfo}>insert bank statement info</span></p>
                    <li style={Styles.liStyle}>{product.brand}{product.name}<span style={Styles.productPrice}>${product.price}</span></li>

                    { if(product[i] == product[0]){
                        this.props.expeditedShipping ?
                        <li style={Styles.liStyle}>Shipping & Handling<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                        <li style={Styles.liStyle}>{this.props.expeditedShipping.name}<span style={Styles.productPrice}>${this.props.expeditedShipping.shippingPrice}</span></li>
                        :
                        <li style={Styles.liStyle}>{product.name}<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                    } else {
                      <li style={Styles.liStyle}>Shipping & Handling<span style={Styles.productPrice}>${product.shippingPrice}</span></li>
                    }
                  }

                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <div>
        <p style={Styles.total}>Total: <span style={Styles.totalPrice}>${findTotal()}</span></p>
      </div>

当前错误内容如下：错误在./src/client/app/cbd-mobile/components/receipt/ReceiptComponent.js 模块构建失败：SyntaxError：意外的令牌（83:29）

81 | {product.brand} {product.name} $ {} product.price 82 | {/ *运费＆amp;处理$ {product.shippingPrice} * /}

83 | {if（product [i] == product [0]）{ | ^ 84 | this.props.expeditedShipping？ 85 |运输与发货处理$ {} product.shippingPrice 86 | {this.props.expeditedShipping.name} $ {this.props.expeditedShipping.shippingPrice}

@ ./src/client/app/index.jsx 31：24-83 @ multi（webpack）-dev-server / client？http://localhost:8080 ./src/client/app/index.jsx webpack：无法编译。

我怎样才能在我的一个反应组件的渲染中有一个if语句？

0 个答案: