如何解决我无法在反应中创建条件以进行验证
在React中我有一个问题,我需要像第66和67行那样创建一个条件,但是它不允许我添加第68行中的一个条件,因为当某件事发生时执行一个或另一个,我需要应用与onClick product.showPrice.offerPrice> 0
相同的条件UPDATEEE
我需要应用与eventClickOption函数相同的逻辑,但是在
{...carouselItem("product_impression",product.id,product.name,product.category)}
eventClickOption = (product:any) => {
if(product.showPrice.offerPrice > 0 ){
return carouselItem( "click_product_promo",product.category)
} return carouselItem( "click_product",product.category)
}
<div className="body">
<IonSlides key={this.slideId} id={this.slideId} pager={false}>
{this.props.products.map(product => (
<IonSlide key={product.id} onClick={this.eventClickOption}
{...carouselItem("product_impression",product.category)} >
<ProductCard
key={product.id}
product={product}
settings={this.props.settings}
cartModel={this.props.cartModel}
onGoToCart={onGoToCart}
></ProductCard>
</IonSlide>
))}
</IonSlides>
</div>
如果大于0,我需要执行
{... carouselItem ("product_impression_promo",this.props.info.title)}
如果不是{... carouselItem ("product_impression",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.category)
}
它会更容易和可读性
<IonSlide key={product.id} onClick ={isProductPriceExist} {...carouselItem("product_impression",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.category)}
else{
carouselItem("product_impression",product.category)
}
return(
<IonSlide key={product.id} onClick ={()=>product && product.showPrice.offerPrice > 0 ?
carouselItem( "click_product_promo",product.category) :
carouselItem( "click_product",product.category )}>
<ProductCard
key={product.id}
product={product}
settings={this.props.settings}
cartModel={this.props.cartModel}
onGoToCart={onGoToCart}
></ProductCard>
</IonSlide>)
})}
</IonSlides>
我做了上面的条件,然后将地图的()更改为{},以便它接受条件并添加一个返回值,现在它可以正常工作了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。