Пример React PropTypes: как использовать PropTypes для проверки свойств в React

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

import React from 'react';
import PropTypes from 'prop-types';
function MyComponent(props) {
  return <div>{props.message}</div>;
}
MyComponent.propTypes = {
  message: PropTypes.string.isRequired,
};
export default MyComponent;

В этом примере у нас есть функциональный компонент под названием MyComponent. Мы определяем свойство под названием message, используя PropTypes. Ожидается, что свойство будет строкой и является обязательным (как указано в isRequired). Если тип свойства не является строкой или отсутствует, в консоли будет записано предупреждение.

Некоторые другие полезные валидаторы PropTypes включают:

  • PropTypes.array: проверяет, является ли свойство массивом.
  • PropTypes.bool: проверяет, является ли свойство логическим.
  • PropTypes.func: проверяет, является ли свойство функцией.
  • PropTypes.number: проверяет, является ли свойство числом.
  • PropTypes.object: проверяет, является ли свойство объектом.
  • PropTypes.symbol: проверяет, является ли свойство символом.
  • PropTypes.node: проверяет, что свойство является визуализируемым узлом React (строка, число, элемент и т. д.).
  • PropTypes.element: проверяет, что свойство является элементом React.

Это всего лишь несколько примеров. PropTypes предоставляет множество других средств проверки и опций для настройки проверки свойств.