如何使用JSX的三元表达式？

Question

我想使用JSX之类的三元表达式，如：

<div>
   {isLoading
      ? 'pending...'
      : errorMsg ? errorMsg : <div>something...</div>
   }
</div>

但我想它可以像这样简单，但它不起作用

<div>
   {isLoading
     ? 'pending...'
     : {errorMsg || (<div>something...</div>)}
   }
</div>

Answer 1

是的，你可以写，但删除{}。原因是，{}需要object，而在其他情况下，这意味着您尝试返回<div> {isLoading ? 'pending...' : (errorMsg || (<div>something...</div>)) // no `{}`, otherwise it will be treated an a object } </div> 。这就是你不在工作的原因。

像这样写：

Main