PropTypes — перевірка типів React

React. Просунуті керівництва. Частина Друга
Продовження серії перекладів розділу "Просунуті керівництва" (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
.
Попередня частина: JSX — подробиці.
Джерело: React — Advanced Guides — Typechecking With PropTypes
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.