Продолжение серии переводов раздела "Продвинутые руководства" (Advanced Guides) официальной документации библиотеки React.js.
PropTypes — проверка типов в React
По мере того, как ваше приложение будет расти — вы можете наткнуться на большое количество ошибок, связанных с проверкой типов. Для некоторых приложений, вы можете использовать расширения JavaScript такие как Flow или TypeScript осуществляя проверку типов всего вашего приложения. Но если вы не используете таковые — React предоставляет некоторые встроенные возможности проверки типов.
Для осуществления проверки типов свойств (props) компонента, вы можете определить специальное свойство класса компонента — propTypes
:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
Модуль React.PropTypes
экспортирует набор валидаторов, которые могут быть использованы для проверки получаемых данных. В этом примере мы используем валидатор React.PropTypes.string
. В случае, если в свойство будет передано невалидное значение — в консоли JavaScript будет показано предупреждение. В целях производительности, propTypes
проверяются только в режиме разработки (development).
React.PropTypes
В этом примере реализованы различные поддерживаемые валидаторы:
MyComponent.propTypes = {
// Вы можете объявить, что свойство принимает один из JavaScript примитивов.
// Обратите внимание, что обязательное наличие того или иного свойства не проверяется.
// Для этого есть отдельная расширенная нотация валидаторов.
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// Что-то, что React может отобразить (отрендерить): числа, строки, элементы или массив/фрагмент,
// содержащий эти типы.
optionalNode: React.PropTypes.node,
// Элемент React.
optionalElement: React.PropTypes.element,
// Вы также можете задекларировать, что свойство является экземпляром класса. При валидации
// используется JavaScript оператор instanceof.
optionalMessage: React.PropTypes.instanceOf(Message),
// Вы можете ограничить значение свойства списком значений.
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// Ограничение свойства списком валидаторов.
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// Ограничение, что свойство должно быть массивом значений определенного типа.
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// Ограничение, что свойство должно быть объектом со свойствами определенного типа.
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// Ограничение, что свойство должно быть объектом определенной формы
// (указываются имена свойств объекта и их типы).
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// Здесь применяется расширенная нотация валидатора. `React.PropTypes.func` указывает на то,
// что значение свойства должно быть функцией.
// Нотация `.isRequired` расширяет валидатор и делает свойство обязательным.
// `.isRequired` может использоваться с любым из поддерживаемых валидаторов.
requiredFunc: React.PropTypes.func.isRequired,
// Обязательное свойство любого типа
requiredAny: React.PropTypes.any.isRequired,
// Вы можете определить свой валидатор. Он должен возвращать объект Error если валидация не пройдена.
// Не используйте `console.warn` или `throw`, т.к. это не будет работать в валидаторе `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// Вы можете использовать собственный валидатор в `arrayOf` и `objectOf`.
// Он должен возвращать объект Error если валидация не пройдена. Валидатор
// будет вызван для каждого ключа массива или объекта. Первые два аргумента
// валидатора - непосредственно сам массив или объект, и ключ
// текущего элемента.
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Ограничение единственного потомка
С помощью React.PropTypes.element
вы можете наложить ограничение, что в компонент может быть передан только один единственный потомок.
class MyComponent extends React.Component {
render() {
// Если в props.children будет более одного элемента возникнет предупреждение.
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = {
children: React.PropTypes.element.isRequired
};
Значения свойств по умолчанию
Вы можете определить значения по умолчанию для ваших props
определив специальное свойство класса компонента — defaultProps
:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Определение значений по умолчанию для props:
Greeting.defaultProps = {
name: 'Stranger'
};
// Отобразит "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
В данном примере значение defaultProps
будет использовано для установки значения this.props.name
если оно не было определено в компоненте JSX. Проверка типов propTypes
производится после установки значений из defaultProps
, поэтому проверка типов также применяется в случае установки значения из defaultProps
.
Следующие части:
- Ref-атрибуты и DOM в React
- Неконтролируемые компоненты в React.
- Оптимизация производительности в React.
Предыдущая часть:
Первоисточник: React — Advanced Guides — Typechecking With PropTypes