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

Question

我有一个接收 badge 道具的组件（请参见下面的示例）。徽章是可选的，但一旦使用，我希望它里面有一些必填字段。我尝试了以下方法：

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

它有效，但我在 Chrome 上尝试在没有徽章的情况下使用它时收到此警告：

Warning: Failed prop type: The prop badge.src is marked as required in Component, but its value is null.

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

---

组件使用示例：

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

---

badge 未提供

Answer 1

这是执行此操作的正确方法。我对这怎么行不通感到非常好奇，所以我将它粘贴到 CodePen (https://codepen.io/Oblosys/pen/xLvxrd) 中，它按预期工作。 （打开控制台，取消注释失败的控制台以查看 prop-type 错误）

您的代码中一定有其他地方出错了，并且在某些时候您渲染了一个 Component 和一个徽章 属性 对象，该对象具有 src: null。也许在来自 api 请求的数据到达之前？通过一些控制台登录 Component 及其父级，您应该能够找到罪魁祸首。