如果速记内声明，如果声明

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