!!的妙用

背景

x 是一个字符串，要求 x 为 null/undefined/‘’ 时不要渲染元素

很容易会写出以下代码

1	{x?.length > 0 && <View/>}

但是这个代码是有问题的，因为 undefined 时，这个 x?.length 也会是 undefined，undefined 与 0 比较 ts 会报错。

那改为以下写法呢？

1	{x?.length && <View/>}

这个虽然 ts 不会报错，但是如果 x 是 ‘’ 时， length 为 0，会导致运行时 React 报错

使用 !! 来强制转 boolean，null/undefined/‘’ 这几种情况都会转为 false，’1’ 会转为 true，符合预期

1	{!!x && <View/>}

如果 x 为数组，要求是 null/undefined/[] 不渲染，不需要加 !!

1	{x?.length && <View/>}