为了提高英语水平和保持技术成长，开始按计划翻译一些短篇和博客，有问题欢迎讨论👻
原文：Stop using && in React Conditional Rendering
原作者：David Abram
正文
条件渲染是React中的一项技术，它允许你根据某些条件来展示或隐藏用户界面的一部分。这意味着你可以根据你应用程序在任何时间发生的情况来显示不同的内容和组件
比如，你正在构建一个网站，用户可以登录并查看他们的个人资料信息。当用户没有登录时，你可能想展示一个登录表单。但当用户登录后，你可能想展示他们的资料信息。
让我们看看React中条件渲染的一个例子。
The CrocDemo component
import React from 'react';
const CrocDemo: React.FC = () => {
const crocodiles = ['Lyle', 'Snappy', 'Mr. Vile'];
const dodos = [];
return (
<>
<div>{crocodiles.length && `crocodiles: ${crocodiles.map(() => '🐊').join(' ')}`}</div>
<div>{dodos.length && `dodos: ${dodos.map(() => '🦤').join(' ')}`}</div>
</>
);
};这段代码定义了一个名为CrocDemo的React组件
在这个组件中，定义了两个数组：crocodiles和dodos。crocodiles数组包含三条鳄鱼的名字。而dodos数组是空的。这是当然的，因为渡渡鸟已经灭绝了
然后该组件返回了一些JSX代码，包括两个div元素，第一个div元素显示鳄鱼的名字，第二个div元素显示渡渡鸟的名字。
这段代码中有意思的一部分是如何展示这些名字。div元素使用一种叫做条件渲染的技术来决定是否显示名字。
第一个div元素检查crocodies数组的长度是否大于0。如果是，这个div元素就会显示crocodiles文本，然后是一系列的鳄鱼表情。这些表情是用map函数创建，它根据原数组中的鳄鱼数量生成一个新的表情数组，然后用join函数将这些表情连接成一个字符串，显示在div元素内。
第二个div元素按照相同的模式，当它检查dodos数组的长度是否大于0。由于dodos数组是空的，所以这个div元素不会显示任何东西。
所以，最终的结果是，如果鳄鱼数组中有任何鳄鱼，CrocDemo组件就会显示鳄鱼的名字(表情符号)，而对dodos数组则不显示。
至少没有展示关于dodos数组的内容。
crocodiles: 🐊 🐊 🐊
0嗯… 看起来是有一个随机的0，我们期望的是什么都不展示，这是为什么呢？
让我们试着用具有不同false value的&&运算符来了解发生了什么
/* This won't render anything ✅ */
<>{false && <div>👋</div>}</>
/* This will render 0 😡 */
<>{0 && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{"" && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{null && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{undefined && <div>👋</div>}</>
/* This will render NaN 😡 */
<>{NaN && <div>👋</div>}</>在JavaScript中，&&运算符会检查左右操作对象是否都是true，如果左边的操作对象是false，那么右边的操作对象就不会被检查，并且&&运算符会返回左边的操作对象
在表达式{0 && <div>👋</div>}中，左边的操作对象是0，这在javascript中是一个false value，因为左边的操作对象是false，所以右边的操作对象不会被检查。并且返回左边的操作对象，也就是0
当React试图渲染该组件时，它将0解释为一个字符串，并将其渲染到页面上。😡😡😡
NaN的情况是一样的。
/* This will render NaN 😡 */
<>{NaN && <div>👋</div>}</>那么，我们怎么解决这个问题呢？
Use the ternary operator
有几种方法可以解决这个问题。第一个(也是最好的)方法是使用三元运算符。三元运算符是一个条件运算符，它检查一个条件是否为true。如果条件为true，它返回第一个操作对象，如果条件为false，这返回第二个操作对象。
/* This won't render anything ✅ */
<>{0 ? <div>👋</div> : null}</>
/* This won't render anything ✅ */
<>{NaN ? <div>👋</div> : null}</>Convert falsy values to Boolean
另外，我们可以把所有的false转为boolean，或者使用!!运算符，!!运算符是将一个值转为布尔值的，它本质上是将一个true value或者false value转换为true或false的一个速记方法。
/* This won't render anything ✅ */
<>{Boolean(0) && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{Boolean(NaN) && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{!!0 && <div>👋</div>}</>
/* This won't render anything ✅ */
<>{!!NaN && <div>👋</div>}</>Conclusion
条件渲染是React中的一项技术，它允许你根据某些条件来展示或者隐藏用户界面的某些部分。当你想根据应用程序中发生的事情来显示不同的内容或组件时，这很有用。
然而，在使用&&运算符时，有一个问题，如0和NaN这样的false value，会意外地导致意外的渲染。
为了解决这个问题，我们可以使用三元运算符或将false value转换为boolean。这些技术将有助于确保你的React组件完全呈现出你所期望的效果。