Как использовать PropTypes в React?react-71

PropTypes — это механизм проверки типов пропсов (props) в React-компонентах. Давайте разберем пошагово, как их правильно использовать в современных React-приложениях.

1. Установка

С React версии 15.5+ PropTypes вынесены в отдельный пакет:

npm install prop-types

2. Базовое использование

import PropTypes from 'prop-types';

function Welcome({ name, age }) {
  return <h1>Hello, {name}! Age: {age}</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

3. Основные типы пропсов

MyComponent.propTypes = {
  // Примитивные типы
  optionalString: PropTypes.string,
  optionalNumber: PropTypes.number,
  optionalBool: PropTypes.bool,

  // Обязательный пропс
  requiredFunc: PropTypes.func.isRequired,

  // Комплексные типы
  optionalArray: PropTypes.array,
  optionalObject: PropTypes.object,

  // React-специфичные
  optionalNode: PropTypes.node,       // Что-то рендеримое
  optionalElement: PropTypes.element, // React-элемент
  optionalElementType: PropTypes.elementType // Тип компонента
};

4. Продвинутые валидации

Проверка структуры объекта

User.propTypes = {
  profile: PropTypes.shape({
    username: PropTypes.string.isRequired,
    email: PropTypes.string,
    age: PropTypes.number
  })
};

Проверка содержимого массивов

TodoList.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      text: PropTypes.string
    })
  )
};

Кастомные валидаторы

RangeInput.propTypes = {
  value: function(props, propName, componentName) {
    if (props[propName] < 0 || props[propName] > 100) {
      return new Error(
        `Invalid prop ${propName} in ${componentName}. Must be between 0 and 100.`
      );
    }
  }
};

5. Значения по умолчанию

PropTypes часто используют вместе с defaultProps:

Welcome.defaultProps = {
  age: 18 // Значение по умолчанию, если пропс не передан
};

6. Особенности работы

  1. Режим разработки: PropTypes работают только в development-сборке
  2. Производительность: Проверки выполняются в runtime, но не влияют на production
  3. Альтернативы: В TypeScript-проектах PropTypes обычно не используют

7. Пример с функциональным компонентом

import PropTypes from 'prop-types';

const Button = ({ text, onClick, disabled }) => (
  <button onClick={onClick} disabled={disabled}>
    {text}
  </button>
);

Button.propTypes = {
  text: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  disabled: PropTypes.bool
};

Button.defaultProps = {
  disabled: false
};

Резюмируем

PropTypes используются через определение объекта propTypes у компонента, где указываются ожидаемые типы пропсов. Это мощный инструмент для документирования и валидации входных данных компонента, особенно полезный в больших проектах и командах.

Вопросы

Собеседования