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) 中，它按预期工作。 （打开控制台，取消注释失败的控制台以查看 prop-type 错误）

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