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

Question

我有一个React组件，它在输入时需要子对象。道具类型设置如下：

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

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

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

警告：失败的道具类型：提供给WelcomeComponent的类型为boolean的无效道具子[0]，应为单个元素。

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

Answer 1

这是因为

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

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