React组件Row的PropTypes校验报错：children属性无效问题排查

问题根源 #

你遇到的警告是因为条件渲染返回了React会忽略但PropTypes不认可的假值。当this.displayComment(item.type)返回false、0或者空字符串这类假值时，这个表达式的结果会被作为Row的子元素之一加入children数组里——虽然React在渲染时会跳过这些值，但你的PropTypes校验规则只允许React.element或element数组，所以触发了类型不匹配的警告。

解决方案 #

这里有两种靠谱的解决思路，你可以根据需求选择：

思路1：确保条件渲染只返回元素或null

把&&条件渲染改成三元表达式，明确当条件不满足时返回null而不是原假值：

<Row size={1}>
  <Column> { title } </Column>
  {this.displayComment(item.type) ? (
    <Column> { comment } </Column>
  ) : null}
  <Column> { footer } </Column>
</Row>

这样children数组里只会包含合法的React元素或null，而null是React允许的子元素类型，能通过标准的子元素校验。

思路2：调整PropTypes校验规则适配合法子元素

React提供了PropTypes.node类型，它专门用来校验所有可以被React渲染的内容，包括元素、文本、数字，以及React会忽略的null、undefined、false等假值。你可以把Row的PropTypes改成：

Row.propTypes = {
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  gap: PropTypes.number,
  children: PropTypes.node.isRequired
};

如果想更严格一点（只允许元素和合法假值），也可以手动扩展类型：

Row.propTypes = {
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  gap: PropTypes.number,
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.oneOfType([
      PropTypes.element,
      PropTypes.bool,
      PropTypes.null,
      PropTypes.undefined
    ])),
    PropTypes.bool,
    PropTypes.null,
    PropTypes.undefined
  ]).isRequired
};

不过PropTypes.node已经足够覆盖你的场景，写法更简洁。

为什么加PropTypes.func没用？ #

你之前尝试添加PropTypes.func到校验里，但问题出在条件表达式返回的是布尔值/假值，不是函数，所以这个修改对解决当前警告没有帮助。

内容的提问来源于stack exchange，提问作者Dan