为何我会收到无效Prop类型警告？附React组件代码

咱们直接拆解问题核心——你给px和py定义的PropTypes和实际传入的属性类型不匹配，这就是警告的根源。

先看你当前的PropTypes定义：

px: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.object)]),
py: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.object)]),

问题所在 #

grid-styled的Box组件的px/py属性支持的合法类型包括：

• 单个数字（对应预设的spacing刻度值）或字符串（比如"1.5rem"这类自定义间距）
• 响应式数组，元素是数字或字符串（比如[1, 2, 3]，对应不同断点的间距）
• 断点对象（比如{ xs: 1, md: 2 }，为特定断点设置间距）

但你现在把数组类型限制成了arrayOf(PropTypes.object)，也就是说只允许数组里的元素是对象——可实际开发中你传入的数组元素大概率是数字或字符串，这就和定义的类型冲突，触发了无效Prop警告。

修复方案 #

你需要修正px和py的PropTypes，覆盖所有合法的输入类型：

Pane.propTypes = {
  children: PropTypes.node.isRequired,
  px: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
    PropTypes.object // 如果你不需要支持断点对象，可以去掉这一行
  ]),
  py: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
    PropTypes.object
  ]),
};

另外，如果你的警告是因为px/py未传值时出现的undefined问题，可以给组件添加默认值，避免不必要的警告：

Pane.defaultProps = {
  px: 0,
  py: 0
};

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