Предупреждение: не вызывайте PropTypes

Примечание:

С версии React 15.5 React.PropTypes были вынесены в отдельный пакет. Вместо них используйте библиотеку prop-types.

Вы можете использовать codemod-скрипт, автоматизировать переход на использование этой библиотеки.

В следующем мажорном релизе React, если код использует функции валидации PropType, он будет удалён в продакшене. Как только это случится, любой код, который вызывает эти функции вручную (если он не был удалён в продакшене), будет выдавать ошибку.

Объявления PropTypes всё ещё работают

Обычное использование PropTypes по-прежнему поддерживается:

Button.propTypes = {
  highlighted: PropTypes.bool
};

В этом плане ничего не изменилось.

Не вызывайте PropTypes напрямую

Использование PropTypes вне React-компонентов больше не поддерживается:

var apiShape = PropTypes.shape({
  body: PropTypes.object,
  statusCode: PropTypes.number.isRequired
}).isRequired;

// Не поддерживается!
var error = apiShape(json, 'response');

Если вы полагаетесь на использование PropTypes, как в показанном выше примере, мы рекомендуем использовать или создать форк PropTypes (по аналогии этим двум пакетам).

Если вы не исправите это предупреждение, подобный код нарушит работу приложения при использовании React 16.

Если вы не вызываете PropTypes напрямую, но по-прежнему получаете предупреждение

Посмотрите на стек вызовов, созданный предупреждением. Вы найдёте определение компонента, ответственного за непосредственный вызов PropTypes. Скорее всего, проблема из-за сторонних пакетов, которые используют PropTypes из React, например таким образом:

Button.propTypes = {
  highlighted: ThirdPartyPropTypes.deprecated(
    PropTypes.bool,
    'Вместо текущего пропа используйте `active`'
  )
}

В данном случае ThirdPartyPropTypes.deprecated — это обёртка, вызывающая PropTypes.bool. В таком паттерне нет ничего плохого, но он приводит к ошибочному появлению предупреждения, поскольку React считает, что PropTypes вызываются напрямую. В следующем разделе показано, как решить такую проблему с библиотекой вроде ThirdPartyPropTypes. Если это не ваша библиотека, вы можете создать ишью, чтобы её автор решил проблему с предупреждением.

Исправление ошибочного срабатывания в сторонних PropTypes

Если вы автор сторонней библиотеки PropTypes и предоставляете пользователям обёртку над встроенными в React PropTypes, они могут увидеть это предупреждение. Это происходит из-за того, что React не видит последний «секретный» аргумент, который передаётся, чтобы определять вызовы PropTypes вручную.

Вот как исправляется это предупреждение. В качестве примера будем использовать deprecated из библиотеки react-bootstrap/react-prop-types. Текущая реализация передаёт только аргументы props, propName и componentName:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"Проп ${propName}" компонента "${componentName}" объявлен устаревшим.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

Для исправления ошибочного появления предупреждения, убедитесь, что вы передаёте все аргументы в обёрнутый PropType. Это легко сделать с помощью ES6-синтаксиса ...rest:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) { // Обратите на ...rest вот тут
    if (props[propName] != null) {
      const message = `"Проп ${propName}" компонента "${componentName}" объявлен устаревшим.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // и вот здесь
  };
}

После этого предупреждение больше не будет появляться.