react条件渲染 渲染出了数组的长度0

在学习react的时候，使用“逻辑与（&&）”运算符进行条件渲染的时候，遇到页面直接渲染出了数组长度0的问题。

 代码是这样写的：

<div className={classNames('icon', cartList.length && 'fill')}>
    {cartList.length && <div className="cartCornerMark"> { cartList.length } </div>}
</div>

由于写Vue习惯了，在Vue中写v-if都是直接array.length

<div className="cartCornerMark" v-if="cartList.length"> {{ cartList.length }} </div>

后来仔细想了一下，这是因为逻辑与运算符的短路语法，即如果&&左侧为true，那么表达式的结果为&&右侧的值，如果&&左侧为false，那么结果为&&右侧的值。举个例子看一下：

true && false    // true
0 && '123'    // 0
false && '123'    // false

知道逻辑与（&&）运算符的语法后，那么上面这个渲染结果就很理解了。

{cartList.length && <div className="cartCornerMark">{cartList.length}</div>}

// 在渲染的时候相当于：
{0 && <div className="cartCornerMark">{0}</div>}    // 0

// 计算表达式后结果为0，虽然div确实没渲染，但是得到了结果“0”，所以显示在页面上了。

那么这个例子的解决办法有两种：一种是显示的写出array.length > 0，另一种是通过!!运算符强制将length的结果转成布尔值，我更喜欢第二种做法，代码更简洁。

// 第一种 显示写出length > 0
{ cartList.length > 0 && <div className="cartCornerMark"> { cartList.length } </div> }

// 第二种 将length的结果转成布尔值
{ !!cartList.length && <div className="cartCornerMark"> { cartList.length } </div> }

两种表达式，当length === 0 的时候，都会返回false，react不会将false渲染在页面上。所以达到我们的需求。