如果速記內聲明，如果聲明

Question

我似乎無法得到這個簡單的功能的基本工作原理我的標記是像這樣（簡化）

{ loading || Object.keys(product).length <= 0 ? 'loading' : 
    <div> 
    {if(){ 

    }} 
    <ProductPictureWidget mainPic={product.pic_url} /> 
    <ProductOptionsWidget product={product} activeProps={activeProps} selectProductOption={this.selectProductOption}/> 
    </div> 
} 

但是，這給我留下了SyntaxError: Unexpected token我if聲明

什麼我在這裏做錯了嗎？我不允許在我的簡寫if聲明中做if聲明嗎？

Answer 1

JSX不允許返回函數中if statement。但你被允許，如果你想利用if statement使用三元表達式

{ 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> 
} 

但是還存在另一種方式做到這一點，即打電話給在其中使用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> 
} 

Answer 2

JSX只允許表達式，而不是語句。 ternary operator是一個表達式。 if開始if statement。你可以看到爲什麼一個if語句不會通過查看編譯的JavaScript的工作（除去if語句）：

​​

JSX相當於函數調用和對象聲明。如果if語句被編譯，這將產生無效的JavaScript：

{ 
    loading || Object.keys(product).length <= 0 ? 'loading' : React.createElement(
    'div', 
    null, 
    if(){ }, // This is **invalid** JavaScript!! 
    React.createElement(ProductPictureWidget, { mainPic: product.pic_url }), 
    React.createElement(ProductOptionsWidget, { product: product, activeProps: activeProps, selectProductOption: undefined.selectProductOption }) 
); 
}