如何在JSX中使用三元表达式？

Question

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

我希望使用三元表达式并且结合 逻辑运算符，但是这个会报错，如何实现此效果？

Answer 1

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

Answer 2

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

Answer 3

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

<div>{}</div> 中 {} 的内容是 js 代码段,
你的第4行代码多加了一个 {} , 这在 js 语法里面表示对象,然而你并没有指定对象的 key ,所以会报语法错误