React条件渲染为何输出条件值？退出登录时显示数字0

原因 #

在JavaScript中，&&逻辑与运算符的工作机制是：

• 若第一个操作数是真值，返回第二个操作数；
• 若第一个操作数是假值，直接返回这个假值本身。

你这里adminState.loggedIn的值为0（属于假值范畴），所以0 && <TopNav />的运算结果就是0。而React在渲染时，会把数字0当作文本节点直接输出到页面上，因此你会看到退出登录时页面打印出0。

解决方案 #

可以通过以下几种方式解决这个问题：

1. 显式转为布尔值 #

用双感叹号!!将数值转为布尔类型，确保逻辑判断结果是true或false：

{!!adminState.loggedIn && <TopNav />}

2. 直接判断非0状态 #

明确校验loggedIn不等于0：

{adminState.loggedIn !== 0 && <TopNav />}

3. 使用三元表达式 #

通过三元表达式明确指定假值场景返回null（React不会渲染null）：

{adminState.loggedIn ? <TopNav /> : null}

内容的提问来源于stack exchange，提问作者flinch85