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

Question

给出 col1 col2 col3 0 NaN 3482 the string 1 3228 3322 the string 2 1282 NaN the string 3 NaN NaN nan 当value = NaN。

由于某种原因，该应用程序呈现“ NaN”而不是不呈现任何内容。我想念什么吗？我本以为因为NaN不大于0 ...它不会呈现任何内容？

Answer 1

logical 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 {}

或链接整个逻辑，但就我个人而言，出于可读性的考虑，我更愿意这样做