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只允许表达式，而不是语句。 ternary operator是一个表达式。 if开始if statement。您可以通过查看已编译的JavaScript（删除if语句）来了解为什么if语句不起作用：

{
  loading || Object.keys(product).length <= 0 ? 'loading' : React.createElement(
    'div',
    null,
    React.createElement(ProductPictureWidget, { mainPic: product.pic_url }),
    React.createElement(ProductOptionsWidget, { product: product, activeProps: activeProps, selectProductOption: undefined.selectProductOption })
  );
}

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

Answer 2

JSX在返回函数中不允许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 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>
}

如果在ReactJS中，编译失败，意外令牌

2 个答案: