\n\nПримечание:
\nС версии React 15.5
\nReact.PropTypesбыли вынесены в отдельный пакет. Так что используйте библиотекуprop-types.Вы можете использовать codemod-скрипт, чтобы провести замену в коде на использование этой библиотеки.
\n
По мере роста вашего приложения вы можете отловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде Flow и TypeScript. Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство propTypes:
import PropTypes from 'prop-types';\n\nclass Greeting extends React.Component {\n render() {\n return (\n <h1>Привет, {this.props.name}</h1>\n );\n }\n}\n\nGreeting.propTypes = {\n name: PropTypes.string\n};В данном примере проверка типа показан на классовом компоненте, но она же может быть применена и к функциональным компонентам, или к компонентам, созданным с помощью React.memo или React.forwardRef.
PropTypes предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные корректны. В примере мы использовали PropTypes.string. Когда какой-то проп имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности propTypes проверяются только в режиме разработки.
Пример использования возможных валидаторов:
\nimport PropTypes from 'prop-types';\n\nMyComponent.propTypes = {\n // Можно объявить проп на соответствие определённому JS-типу.\n // По умолчанию это не обязательно.\n optionalArray: PropTypes.array,\n optionalBool: PropTypes.bool,\n optionalFunc: PropTypes.func,\n optionalNumber: PropTypes.number,\n optionalObject: PropTypes.object,\n optionalString: PropTypes.string,\n optionalSymbol: PropTypes.symbol,\n\n // Все, что может быть отрендерено:\n // числа, строки, элементы или массивы\n // (или фрагменты) содержащие эти типы\n optionalNode: PropTypes.node,\n\n // React-элемент\n optionalElement: PropTypes.element,\n\n // Тип React-элемент (например, MyComponent).\n optionalElementType: PropTypes.elementType,\n \n // Можно указать, что проп должен быть экземпляром класса\n // Для этого используется оператор `instanceof`.\n optionalMessage: PropTypes.instanceOf(Message),\n\n // Вы можете задать ограничение конкретными значениями\n // при помощи перечисления\n optionalEnum: PropTypes.oneOf(['News', 'Photos']),\n\n // Объект, одного из нескольких типов\n optionalUnion: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.instanceOf(Message)\n ]),\n\n // Массив объектов конкретного типа\n optionalArrayOf: PropTypes.arrayOf(PropTypes.number),\n\n // Объект со свойствами конкретного типа\n optionalObjectOf: PropTypes.objectOf(PropTypes.number),\n\n // Объект с определённой структурой\n optionalObjectWithShape: PropTypes.shape({\n color: PropTypes.string,\n fontSize: PropTypes.number\n }),\n \n // Объект со строгой структурой,\n // при наличии необъявленных свойств будут сформированы предупреждения\n optionalObjectWithStrictShape: PropTypes.exact({\n name: PropTypes.string,\n quantity: PropTypes.number\n }), \n\n // Можно добавить`isRequired` к любому приведённому выше типу,\n // чтобы показывать предупреждение,\n // если проп не передан\n requiredFunc: PropTypes.func.isRequired,\n\n // Значение любого типа\n requiredAny: PropTypes.any.isRequired,\n\n // Можно добавить собственный валидатор.\n // Он должен возвращать объект `Error` при ошибке валидации.\n // Не используйте `console.warn` или `throw` \n // - это не будет работать внутри `oneOfType`\n customProp: function(props, propName, componentName) {\n if (!/matchme/.test(props[propName])) {\n return new Error(\n 'Проп `' + propName + '` компонента' +\n ' `' + componentName + '` имеет неправильное значение'\n );\n }\n },\n\n // Можно задать свой валидатор для `arrayOf` и `objectOf`.\n // Он должен возвращать объект Error при ошибке валидации.\n // Валидатор будет вызван для каждого элемента в массиве\n // или для каждого свойства объекта.\n // Первые два параметра валидатора \n // - это массив или объект и ключ текущего элемента\n customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {\n if (!/matchme/.test(propValue[key])) {\n return new Error(\n 'Проп `' + propFullName + '` компонента' +\n ' `' + componentName + '` имеет неправильное значение'\n );\n }\n })\n};С помощью PropTypes.element вы можете указать, что в качестве дочернего может быть передан только один элемент.
import PropTypes from 'prop-types';\n\nclass MyComponent extends React.Component {\n render() {\n // Это должен быть ровно один элемент.\n // Иначе вы увидите предупреждение\n const children = this.props.children;\n return (\n <div>\n {children}\n </div>\n );\n }\n}\n\nMyComponent.propTypes = {\n children: PropTypes.element.isRequired\n};Вы можете задать значения по умолчанию для ваших props с помощью специального свойства defaultProps:
class Greeting extends React.Component {\n render() {\n return (\n <h1>Привет, {this.props.name}</h1>\n );\n }\n}\n\n// Задание значений по умолчанию для пропсов:\nGreeting.defaultProps = {\n name: 'Незнакомец'\n};\n\n// Отрендерит \"Привет, Незнакомец\":\nReactDOM.render(\n <Greeting />,\n document.getElementById('example')\n);Если вы используете один из Babel-плагинов по преобразованию кода, вроде transform-class-properties, то можете объявить defaultProps как статическое свойство класса (для компонента-наследника от React.Component). Этот синтаксис ещё не утверждён, так что для его работы в браузере нужна компиляция. Подробнее смотрите в предложении о полях класса.
class Greeting extends React.Component {\n static defaultProps = {\n name: 'незнакомец'\n }\n\n render() {\n return (\n <div>Привет, {this.props.name}</div>\n )\n }\n}Определение defaultProps гарантирует, что this.props.name будет иметь значение, даже если оно не было указано родительским компонентом. Сначала применяются значения по умолчанию, заданные в defaultProps. После запускается проверка типов с помощью propTypes. Так что проверка типов распространяется и на значения по умолчанию.