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

У меня есть компонент, который получает опору 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 не поставляется

1 6
reactjs react-proptypes

1 ответ:

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

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

2