为什么React条件渲染渲染NaN？

Question

如果为value && value > 0 && <Component>，则给定value = NaN。

出于某种原因，应用程序呈现"NaN“，而不是不呈现任何内容。我是不是遗漏了什么？我会想，因为NaN不比0...it大，所以不会渲染任何东西？

Answer 1

logical AND (&&)表达式语法为：

expr1 && expr2

根据文档：

如果expr1可以转换为true，则返回expr2；否则，返回expr1。

由于NaN为expr1且为falsy，因此返回NaN。

如果您希望组件仅在value存在并且是大于0的数字时才呈现，则可以简单地编写：

value > 0 && <Component>

Answer 2

所以你基本上可以试一下

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

或者链接整个逻辑，但就我个人而言，为了可读性，我更喜欢这样做