React 开发时，常常需要根据 props 和 state 有条件地渲染组件。虽然条件渲染有多种方式，但本文重点介绍 JavaScript &&运算符。 && 操作符经常会导致 UI bug，这很容易避免并且经常不被提及。
内容
- && 是怎么生效的
- 为什么不推荐使用 &&
- 推荐使用
&& 是怎么生效的
在 React 中使用的一个经典例子：
function MyComponent({ **condition** }) {
return (
<div>
<h1>Title</h1>
condition && <ConditionalComponent />
</div>
);
}
- 如果
condition是真值，则呈现 - 如果
condition是假值，则不呈现
这是 JavaScript 短路验证特性（short-circuit evaluation），当第一个操作数为 false ，终止 && 运算并且不计算第二个操作数。
为什么不推荐使用 &&
大部分情况下，&& 都会生效。但是，当第一个操作数不是 boolean 类型时，就会出现问题。
例如：
-
如果
condition为 0，则在 UI 中显示 0 -
如果
condition未定义，将会抛出错误：“未捕获的错误：错误（...）：没有从渲染返回。这通常意味着缺少返回语句。或者，不渲染，返回 null。”
推荐使用
为避免在 UI 中显示不想要的内容，例如 0，建议 JavaScript 三元运算符。
例如：
condition ? <ConditionalComponent /> : null;
当然，也通过!!将condition转成 Boolean 类型。但这种方式的代码可读性较差。
!!condition && <ConditionalComponent />;
总结
为了防止可避免的 UI 错误，建议使用 JavaScript 三元运算符替代逻辑 AND 运算符来条件渲染 React 组件。
🔴 BAD
condition && <ConditionalComponent />
🟢 GOOD
condition ? <ConditionalComponent /> : null
