reactjs - 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: '美国' }}

<小时/>

未提供徽章

Answer 1

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

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