為什么 React 條件渲染會渲染 NaN？

Question

給定value = NaN當value && value > 0 && <Component> 。

出於某種原因，該應用程序呈現“NaN”而不是不呈現任何內容。 我錯過了什么嗎？ 我會認為因為 NaN 不大於 0 ......它不會渲染任何東西？

Answer 1

邏輯 AND ( && )表達式語法為：

expr1 && expr2

根據文檔：

如果expr1可以轉換為true ，則返回expr2 ； 否則，返回expr1 。

因為NaN是expr1並且是假的，所以返回NaN 。

如果您希望組件僅在value存在且大於 0 的數字時呈現，您可以簡單地編寫：

value > 0 && <Component>

Answer 2

所以你基本上可以試一試

if value !== NaN {
    if value && value > 0 && <Component> {
       // do something 
    } else {}
} else {}

或鏈接整個邏輯，但我個人更喜歡這個以提高可讀性