React PropTypes-как сделать фигуру необязательной с требуемыми полями?

у меня есть компонент, который получает badge prop (см. пример ниже). Значок необязателен, но после его использования я хочу, чтобы внутри него были некоторые обязательные поля. Я пробовал следующее:

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

это работает, но я получаю это предупреждение в Chrome при попытке использовать его без значка:

предупреждение: неудачный тип опоры: опора badge.src отмечен как обязательный в Component, но его значение null.

что такое правильный способ сделать это?

пример использования компонента:

Barack Obama with flag badge={{ src: 'usa.png', alt: 'United States' }}

Barack Obama without flag badge не поставляли

6
react-proptypes reactjs

1 ответов

этой is правильный способ сделать это. Я был очень заинтригован тем, как это не сработает, поэтому я вставил его в CodePen (https://codepen.io/Oblosys/pen/xLvxrd) и он работает так же, как ожидалось. (Откройте консоль и раскомментируйте неудачную, чтобы увидеть ошибку типа prop)

что-то должно быть не так в коде, и в какой-то момент вы оказываете Component с объектом свойства значка, который имеет src: null. Возможно, перед данными из запроса api приехал? С некоторым консольным входом в Component и его родитель, вы должны быть в состоянии найти виновника.

2