使用 propTypes 验证时的条件渲染和警告答案

【问题标题】：Conditional rendering and warning when using propTypes validation使用 propTypes 验证时的条件渲染和警告
【发布时间】：2017-06-23 18:40:51
【问题描述】：

我有一个 React 组件，它需要孩子输入。 PropTypes 设置如下：

static propTypes = {
  children: PropTypes.arrayOf(PropTypes.element).isRequired
};

但是当内联条件变为假时，我会收到警告，即：

{isLoggedIn && <div>You are logged in</div>}

警告：失败的道具类型：提供给boolean 的无效道具children[0] 类型为WelcomeComponent，需要一个ReactElement。

【问题讨论】：

标签： reactjs

【解决方案1】：

这是因为&& 运算符的工作原理。如果第一个表达式是假的，它的评估结果将是运算符的返回值。您可以在此处详细了解它：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators。

在您的情况下，当用户未登录时，它将返回 false，并且您仍然希望获得一个有效的 React 元素，但它并不满足。

您可以在这里看到PropTypes 用于检查接收到的道具是否正常（用于元素检查）的逻辑： https://github.com/facebook/react/blob/master/src/isomorphic/classic/element/ReactElement.js#L378。在您的情况下，typeof false === 'object' 将失败。然后https://github.com/facebook/react/blob/master/src/isomorphic/classic/types/ReactPropTypes.js#L252这个方法会打印警告。

【讨论】：

我知道布尔逻辑是如何工作的。请参阅文档：facebook.github.io/react/docs/…
@Andy 编辑了答案，希望更清楚为什么现在出现警告。
但文档指出：它之所以有效，是因为在 JavaScript 中，真 && 表达式总是计算为表达式，而假 && 表达式总是计算为假。因此，如果条件为真，则 && 之后的元素将出现在输出中。如果为 false，React 将忽略并跳过它。
它声明这些（false、null、undefined 和 true）是有效的孩子，但只是没有被渲染（为了方便条件渲染）：@987654325 @
使用PropTypes.node.isRequired，描述为here。