速記内の文if文

Question

が、私はこの単純な機能が動作し得るように見えるカント基本的に私のマークアップはそう（簡体字）

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

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

のようなものです。しかし、これは私のif声明

何にSyntaxError: Unexpected tokenで私を離れた場合正確にここで間違っている私はif私の略語ifステートメントの中で文を行うことを許可されていないですか？

Answer 1

JSXは戻り関数内if statementを許可していません。しかし、あなたは、あなたが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文は（削除if文で）コンパイルされたJavaScriptを見ることで機能しない理由を知ることができます。

​​

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 }) 
); 
}