问题描述
我似乎无法让这个简单的函数工作基本上我的标记就像这样(简化)
{ loading ||Object.keys(product).length }
但这在我的 if
语句中留下了 SyntaxError: Unexpected token
我到底做错了什么,我不允许在我的速记 if
语句中使用 if
语句吗?
JSX 不允许在返回函数中使用 if 语句
.但是你可以使用三元表达式
{ loading ||Object.keys(product).length }
但是,如果您想使用 if 语句
,还有另一种方法可以做到,即调用一个函数,在其中使用 if-else 语句
conditionalRender() {如果(条件){return 你好} 别的 {返回空值}}{ 加载 ||Object.keys(product).length
}
I cant seem to get this simple function to work basically my markup is like so(simplified)
{ loading || Object.keys(product).length <= 0 ? 'loading' :
<div>
{if(){
}}
<ProductPictureWidget mainPic={product.pic_url} />
<ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
</div>
}
But this leaves me with SyntaxError: Unexpected token
on my if
statement
What exactly am I doing wrong here am I not allowed to do if
statements within my shorthand if
statement?
JSX doesn't allow if statement
within the return function. But you are allowed to use ternary expressions
{ loading || Object.keys(product).length <= 0 ? 'loading' :
<div>
{(condition here)? <div>Hello World</div>: null}
<ProductPictureWidget mainPic={product.pic_url} />
<ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
</div>
}
However if you want to make use of if statement
there is an alternative way to do it, i.e to call a function within which you use the if-else statements
conditionalRender() {
if(condition) {
return <div>Hello</div>
} else {
return null
}
}
{ loading || Object.keys(product).length <= 0 ? 'loading' :
<div>
{this.conditionalRender()}
<ProductPictureWidget mainPic={product.pic_url} />
<ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/>
</div>
}
这篇关于编译失败,如果在 ReactJS 中出现意外标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!