JavaScript do表達式：if else else else

Question

我對擬議的JavaScript do expression construct有疑問。有很多示例說明如何使用從if和else這兩個條件語句中返回值。同樣適用於if與else if和else。

那麼只有一個if條款，但沒有else if或else？這是否是do表達式的有效用法？

我的用例是用於有條件地顯示反應組件中的內容。我想編寫代碼JSX像這樣，但我不知道這是否是有效的：

export default function myComponent(props) { 
    return (
    <div> 
     {do { 
     if (true) { 
      <p>If statement is true</p> 
     } 
     }} 
     <p>I am always rendered</p> 
    </div> 
); 
} 

我也問這個問題在this gist。

Answer 1

這裏是巴貝爾做什麼：

輸入：

<p> 
    {do { 
    if (true) { 
     <a/> 
    } 
    }} 
</p> 

輸出：

React.createElement(
    "p", 
    null, 
    true ? React.createElement("a", null) : void 0 
); 

這對我來說很有意義。隱含else中的返回值將爲undefined。

Answer 2

爲什麼不簡單地做到這一點？使用三元操作符

export default function myComponent(props) { 
    return (
    <div> 
     { true ? <p>If statement is true</p> : null } 
     <p>I am always rendered</p> 
    </div> 
); 
} 

Answer 3

不確定do，也由@Felix Kling

做表情提的是第1階段的建議，不是ES2016（ES7）的一部分。

---

你可以把它寫一樣，如果條件不滿足此使用ternary operator，並return null：

export default function myComponent(props) { 
    return (
     <div> 
      { 
       true? 
        <p>If statement is true</p> 
       :null 
      } 
      <p>I am always rendered</p> 
     </div> 
    ); 
} 

或使用&& Operator：

export default function myComponent(props) { 
    return (
     <div> 
      { 
       true && <p>If statement is true</p> 
      } 
      <p>I am always rendered</p> 
     </div> 
    ); 
} 

檢查的DOC更多細節a布特Conditional Rendering。