使用propTypes验证时的条件呈现和警告

Question

我有一个React组件，期望输入的孩子。 PropTypes设置如下：

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

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

children[0]

  

警告：道具类型失败：提供给boolean的{​​{1}}类型的道具WelcomeComponent无效，需要一个ReactElement。

文档并没有真正帮助。 https://facebook.github.io/react/docs/conditional-rendering.html

Answer 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此方法将打印警告。