Изучите PropTypes за 5 минут

Когда мы создаем приложение в React JS, мы сталкиваемся с проблемой из-за неправильного типа реквизита, компонент не будет вести себя так, как ожидалось, и изначально, если вы не найдете эти ошибки, по мере увеличения сложности приложения. , трудно выявить и исправить ошибки. Чтобы решить эту проблему, мы можем проверить тип с помощью Typescript. Если вы, как и я, не заинтересованы в изучении нового языка, вы можете сделать это с помощью встроенного в React JS пакета prop-types. Чтобы проверить типы реквизита в компоненте, вы можете использовать пакет prop-types. В этом модуле мы рассмотрим типы свойств

PropTypes экспортирует ряд валидаторов, которые можно использовать для проверки достоверности получаемых вами данных. В этом примере мы используем PropTypes.string. Когда для реквизита указано недопустимое значение, в консоли JavaScript будет показано предупреждение. Из соображений производительности PropTypes проверяется только в режиме разработки.

import React from "react";
import PropTypes from "prop-types";
export default function Children({ type }) {
return <div>{type}</div>;
}
Children.defaultProps = {
type: "Default",
};
Children.propTypes = {
type: PropTypes.arrayOf(PropTypes.number),
};

Типы свойств

Вот пример, документирующий различные предоставленные валидаторы:

import PropTypes from "prop-types";
component.propTypes = {
// You can declare that a prop is a specific JS type. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// A React element type (ie. MyComponent).
optionalElementType: PropTypes.elementType,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(["News", "Photos"]),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message),
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
}),
// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number,
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A required value of any data type
requiredAny: PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function (props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
"Invalid prop `" + propName + "` supplied to" + " `" + componentName  + "`. Validation failed.")}},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: PropTypes.arrayOf(function (propValue,key,componentName,location,propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error("Invalid prop `" +propFullName +"` supplied to" +" `" +componentName +"`. Validation failed."
)}})};

Значения свойств по умолчанию

Вы можете определить значения по умолчанию для своих реквизитов, назначив их специальному свойству defaultProps:

import React from "react";
import PropTypes from "prop-types";
export default function Children({ type }) {
return <div>{type}</div>;
}
Children.defaultProps = {
type: "Default",
};
Children.propTypes = {
type: PropTypes.arrayOf(PropTypes.number),
};