Reactjs 我能'；t在react中创建条件以进行验证

我在React中遇到了一个问题，我需要像第66行和第67行那样设置一个条件，但它不允许我添加第68行中的条件，因为当发生某些事情时，执行一个或另一个，我需要应用与onClick product.showPrice.offerPrice>0相同的条件

更新

我需要应用与eventClickOption函数相同的逻辑，但是

{…carouselItem（“product_impression”，product.id，product.name，product.category）}

eventClickOption=（产品：任意）=>{
if（product.showPrice.offerPrice>0）{
返回carouselItem（“单击产品促销”、product.id、product.name、，
（产品类别）
}返回转盘（“单击产品”、product.id、product.name、，
（产品类别）
}
{this.props.products.map（product=>）
))}

如果它大于0，我需要它来执行

{…carouselItem（“product\u impression\u promo”，product.id，product.name，this.props.info.title）}

如果没有

{…carouselItem（“product_impression”，product.id，product.name，this.props.info.title）}

---

我尝试了一些方法，但无法解决它，因为它给了我错误

您可以在函数中分离所需的逻辑，并将onClick传递给它，如：

const isProductPriceExist =() => {
 if(product.showPrice.offerPrice > 0 ){
     return carouselItem( "click_product_promo", product.id, product.name, product.category)
} return carouselItem( "click_product", product.id, product.name, product.category)
         
}

它将更容易阅读

<IonSlide key={product.id} onClick ={isProductPriceExist} {...carouselItem("product_impression", product.id, product.name, product.category)}/>

---

您可以分离函数中所需的逻辑，并将其传递给onClick，如：

const isProductPriceExist =() => {
 if(product.showPrice.offerPrice > 0 ){
     return carouselItem( "click_product_promo", product.id, product.name, product.category)
} return carouselItem( "click_product", product.id, product.name, product.category)
         
}

它将更容易阅读

<IonSlide key={product.id} onClick ={isProductPriceExist} {...carouselItem("product_impression", product.id, product.name, product.category)}/>

我的解决方案是

  <IonSlides key={this.slideId} id={this.slideId} pager={false}>
        {this.props.products.map(product => {
        if(product && product.showPrice.offerPrice > 0) {
          carouselItem("product_impression_promo", product.id, product.name, product.category)}
        else{
          carouselItem("product_impression", product.id, product.name, product.category)
        }
          return(
          <IonSlide key={product.id} onClick ={()=>product && product.showPrice.offerPrice > 0 ? 
            carouselItem( "click_product_promo", product.id, product.name, product.category) :
              carouselItem( "click_product", product.id, product.name, product.category )}>
            <ProductCard
              key={product.id}
              product={product}
              settings={this.props.settings}
              cartModel={this.props.cartModel}
              onGoToCart={onGoToCart}
            ></ProductCard>
            
          </IonSlide>)
        })}
      </IonSlides>

{this.props.products.map（product=>{
if（product&&product.showPrice.offerPrice>0）{
carouselItem（“product\u impression\u promo”，product.id，product.name，product.category）}
否则{
carouselItem（“product_impression”、product.id、product.name、product.category）
}
返回(
product&&product.showPrice.offerPrice>0？
carouselItem（“单击产品促销”，product.id，product.name，product.category）：
carouselItem（“单击产品”，product.id，product.name，product.category）}>
)
})}

我做了上面的条件，并将映射的（）改为{}，这样它将接受条件并添加一个返回，现在它工作了

我的解决方案是这样的

  <IonSlides key={this.slideId} id={this.slideId} pager={false}>
        {this.props.products.map(product => {
        if(product && product.showPrice.offerPrice > 0) {
          carouselItem("product_impression_promo", product.id, product.name, product.category)}
        else{
          carouselItem("product_impression", product.id, product.name, product.category)
        }
          return(
          <IonSlide key={product.id} onClick ={()=>product && product.showPrice.offerPrice > 0 ? 
            carouselItem( "click_product_promo", product.id, product.name, product.category) :
              carouselItem( "click_product", product.id, product.name, product.category )}>
            <ProductCard
              key={product.id}
              product={product}
              settings={this.props.settings}
              cartModel={this.props.cartModel}
              onGoToCart={onGoToCart}
            ></ProductCard>
            
          </IonSlide>)
        })}
      </IonSlides>

{this.props.products.map（product=>{
if（product&&product.showPrice.offerPrice>0）{
carouselItem（“product\u impression\u promo”，product.id，product.name，product.category）}
否则{
carouselItem（“product_impression”、product.id、product.name、product.category）
}
返回(
product&&product.showPrice.offerPrice>0？
carouselItem（“单击产品促销”，product.id，product.name，product.category）：
carouselItem（“单击产品”，product.id，product.name，product.category）}>
)
})}

---

我做了上面的条件并将映射的（）更改为{}，这样它将接受条件并添加一个返回，现在它工作了

它应该显示什么吗？像您的函数{…carouselItem（“product\u impression\u promo”，product.id，product.name，this.props.info.title”）一样，它具体做什么？（答案不一样）不，它不是一个视图，它只是一个函数，向我发送它内部的参数，以捕获Firebase中的一些事件。因此，我只需要在offerPrice大于0时，发送一个打印了促销的产品，如果不是，它应该显示一些正常的内容吗？像您的函数{…carouselItem（“product\u impression\u promo”，product.id，product.name，this.props.info.title”）一样，它具体做什么？（答案不一样）不，这不是一个视图，它只是一个函数，向我发送它内部的参数，以捕获FireBase中的一些事件。因此，我只需要，如果offerPrice大于0，则发送带有促销的产品，如果不是，则发送一个正常的产品OK，但这仅适用于onClick函数，我仍然有{…carouselItem（“product_impression”，product.id，product.name，product.category）}的问题，假设它在ex:

var carsNum=（）=>[1,2,3]

中正常工作，并且您希望传递prop

{…carsNum（）}

它将为您提供所需的对象

{0:1,1:2,2:3}

我认为我们彼此不了解，但感谢您的回答，我需要将产品的条件设置为相同。showPrice.offerPrice>0，但不要将其应用于以click\u product为字符串的产品，也不要将其应用于click\u promo，我需要将其应用于product\u Impression。onClick事件现在是否如预期那样工作？如果没有，请检查它是否在您的IonSlides组件中调用-您的最后一个代码：{…carouselItem（“product_impression”，product.id，product.name，product.category）}返回您正在传递的道具列表？或者，它是一个您想要执行以执行某些逻辑的函数？如果你不是想传递道具，而是想用逻辑执行一个函数，那么它绝对不应该被调用OK，但这只适用于onClick函数，我仍然有一个问题{…carouselItem（“product_impression”，product.id，product.name，product.category）}它假设对ex:

var carsNum=（）=>[1,2,3]

你想通过prop

{…carsNum（）}

它会给你你需要的对象

{0:1,1:2,2:3}

我想我们彼此还不了解，但感谢你的回答，我需要把产品的条件设置为相同的。showPrice.offerPrice>0，但不要将它应用到以click\u product作为字符串的产品，也不要点击产品宣传，我需要将其应用到产品宣传上。onClick活动现在是否如预期的那样工作？如果没有，请检查它是否在您的IonSlides组件中被调用-您的最后一个代码：{…carouselItem（“produ”）