原文地址：medium.com/geekculture…

原文作者：Jakub Kozak

如果你看过 React 应用，那你应该知道如何通过 props 和 state 来决定是否渲染组件中的内容。虽然有很多方式去实现条件渲染，但是这篇文章主要聚焦在使用 && 运算符来实现的方式。这样强调的主要原因是 && 运算符经常会导致 UI 错误，但其实这些错误是很容易避免的，而且这个问题不经常被提及。

内容

1. && 运算符是怎么工作的
2. 为什么不要使用 && 运算符
3. 可以用什么来代替 && 运算符

&& 运算符是怎么工作的

在 React 中使用 && 运算符的一个经典例子：

function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}

简单概括下：

• 如果满足条件，那么 <ConditionalComponent/> 就会被渲染

• 如果不满足条件，那么 <ConditionalComponent/> 就不会被渲染

为什么是这样的？这并不是 React 的特殊而是 JavaScript 的行为，在其他编程语言中称为"短路判断"。例如，如果第一个操作数（condition）是错误的，&& 运算符就会停止，且不会计算第二个操作数（<ConditionalComponent/>）。

你可以尝试在你的浏览器的控制台中执行以下代码：

// 这段代码执行后会弹出一个警告提示
true && alert('Hello');
// 这段代码执行后不会发生任何事情
false && alert('Not hello');

为什么不要使用 && 运算符

&& 运算符经常被作为首选且能达到我们的目的。但是可以使用并不意味着你应该使用。

在我们前面提到过的例子中，如果 condition 的值为 true 或者 false，那么我们可以得到我们期望的结果 —— <ConditionalComponent/> 渲染或者不渲染。目前看来都是符合预期的。但是，如果 condition 的值不为布尔值时，就可能会导致问题。

例如：

• 如果 condition 是 0，那么 0 就会被展示出来
• 如果 condition 是 undefined，那么你就会得到这样的错误：“Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.”

可以用什么来代替 && 运算符

为了避免一些非预期的结果被展示出来，例如 0 这种可能会导致布局的混乱，可以使用 JavaScript 的三元运算符来代替。例如：

condition ? <ConditionalComponent /> : null;

总结

为了避免 UI 错误，使用 JavaScript 的三元运算符代替逻辑与运算符来作为 React 组件渲染的条件判断。这是一个简单的咒语但是牢不可破。

🔴 BAD
condition && <ConditionalComponent />
🟢 GOOD
condition ? <ConditionalComponent /> : null