React PropTypes - 如何使形状可选,其字段是否必需？

Question

我有一个接收badge道具的组件(参见下面的示例).徽章是可选的,但一旦使用,我希望它内部有一些必填字段.我尝试过以下方法:

Component.propTypes = {
  badge: PropTypes.shape({
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
  }),
}

它有效,但我在Chrome上尝试使用没有徽章时会收到此警告:

警告:失败的道具类型:道具badge.src被标记为必需Component,但其值为null.

这样做的正确方法是什么？

---

组件使用示例:

badge={{ src: 'usa.png', alt: 'United States' }}

---

badge 不提供

Answer 1

这是执行此操作的正确方法。我对这行不通很感兴趣，所以我将它粘贴到 CodePen ( https://codepen.io/Oblosys/pen/xLvxrd ) 中，它按预期工作。（打开控制台，取消对失败的注释以查看道具类型错误）

您的代码中肯定有其他问题，并且在某些时候您使用Component带有src: null. 也许在来自 api 请求的数据到达之前？通过某些控制台登录Component及其父级，您应该能够找到罪魁祸首。