修复在你的JSX代码中看到的 "0"的方法指南

在网络的早期，当涉及到编码实践时，感觉就像西部荒野一样--只要让它工作。然后，我们开始接受更好的实践，将HTML与CSS和JavaScript分开。 然后是React和JSX，我们将JavaScript、HTML、甚至CSS与造型组件结合在一起--我们制造了一个多么优雅的混乱啊！"。

每隔一段时间，这种混乱的一部分就是我看到0 ，显示在我的JSX代码的输出中，我想起了原因：变量类型的处理不当，再加上使用&& 。 让我解释一下!

JSX中的一个流行模式是。

<div>Some header</div>
{someValue && <div>Some header</div>}

这个模式是有意义的，但是请看字符串和数字类型的输出的区别。

"0" && "Thing"
> "Thing"
0 && "Thing"
> 0

请注意，字符串值0 ，允许返回第二个值，但数字类型的0 ，只是返回0 。最好的做法是在你的JJSX中总是把值投到一个Boolean 。

{Boolean(value) && ....}

Typescript甚至是PropTypes 可以帮助捕捉这些问题，但即使是经验丰富的老手有时也会遇到这些痛点。