为什么 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 {}

或链接整个逻辑，但我个人更喜欢这个以提高可读性