Don't Call PropTypes Warning

Примітка:

React.PropTypes був переміщений в окремий пакунок, починаючи з React v15.5. Будь ласка, використовуйте натомість бібліотеку 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, які розширюють PropTypes у React, наприклад:

Button.propTypes = {
  highlighted: ThirdPartyPropTypes.deprecated(
    PropTypes.bool,
    'Use `active` prop instead'
  )
}

У цьому випадку 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}" property of "${componentName}" has been deprecated.\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}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // і тут
  };
}

Це зупинить вивід попередження.