Skip to content

Typechecking with Proptypes translated #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vldmrkl merged 8 commits into from
Apr 8, 2019
Merged

Typechecking with Proptypes translated #98

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3890bc0
First section of typechecking-with-proptypes translated
vburlai Apr 5, 2019
4cc7921
Example section of typechecking-with-proptypes translated
vburlai Apr 5, 2019
2141cec
Final section of typechecking-with-proptypes translated
vburlai Apr 5, 2019
70b6b8d
fixup
vburlai Apr 6, 2019
f46cf18
Removed extra comment and reformatted
vburlai Apr 8, 2019
0d53ebe
Review fixes
vburlai Apr 8, 2019
31c2077
Update content/docs/typechecking-with-proptypes.md
vldmrkl Apr 8, 2019
34506fc
Update typechecking-with-proptypes.md
vburlai Apr 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 49 additions & 49 deletions content/docs/typechecking-with-proptypes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
id: typechecking-with-proptypes
title: Typechecking With PropTypes
title: Перевірка типів за допомогою PropTypes
permalink: docs/typechecking-with-proptypes.html
redirect_from:
- "docs/react-api.html#typechecking-with-proptypes"
---

> Note:
> Примітка:
>
> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
> `React.PropTypes` переміщено в інший пакет починаючи з React версії 15.5. Будь-ласка надалі замість нього використовуйте [бібліотеку `prop-types`](https://www.npmjs.com/package/prop-types).
>
>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
>Ми надаємо [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) для автоматизації міграції коду.

As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
По мірі зростання вашого додатку, ви зможете піймати багато помилок з перевіркою типів. Для деяких додатків ви можете використовувати розширення JavaScript, такі як [Flow](https://flow.org/) чи [TypeScript](https://www.typescriptlang.org/), щоб перевірити типи у всьому додатку. Але, навіть якщо ви ними не користуєтесь, React надає вбудовані можливості перевірки типів. Для виконання перевірки типів пропсів ви можете присвоїти спеціальну властивість `propTypes` компоненту:

```javascript
import PropTypes from 'prop-types';

class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
<h1>Привіт, {this.props.name}</h1>
);
}
}
Expand All @@ -30,18 +30,18 @@ Greeting.propTypes = {
};
Comment thread
vburlai marked this conversation as resolved.
```

`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
`PropTypes` експортує ряд валідаторів, які можуть бути використані щоб впевнитись, що ви отримали вірні дані. В наведеному вище прикладі ми використовуємо `PropTypes.string`. Якщо якийсь проп отримає невірне значення, в консолі JavaScript буде показано попередження. З міркувань продуктивності `propTypes` перевіряються лише в режимі розробки.

### PropTypes {#proptypes}

Here is an example documenting the different validators provided:
Приклад використання наявних валідаторів:

```javascript
import PropTypes from 'prop-types';

MyComponent.propTypes = {
// You can declare that a prop is a specific JS type. By default, these
// are all optional.
// Ви можете оголосити, що проп має вказаний JS-тип.
// Ці типи за замовчуванням дозволяють відсутність значення.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
Expand All @@ -50,85 +50,85 @@ MyComponent.propTypes = {
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

// Anything that can be rendered: numbers, strings, elements or an array
Comment thread
vburlai marked this conversation as resolved.
// (or fragment) containing these types.
// Все, що може бути відрендерено: числа, рядки, елементи чи
// масив (або фрагмент), що містить вищезгадані типи.
optionalNode: PropTypes.node,

// A React element.
// React-елемент.
optionalElement: PropTypes.element,

// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
// Ви можете вказати, що проп має бути екземпляром вказаного класу.
// Для перевірки буде використано оператор instanceof.
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
}),

// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
// Ви можете додати `isRequired` після будь-якого з наведених вище типів.
// В цьому випадку буде показано попередження, якщо проп не надано.
requiredFunc: PropTypes.func.isRequired,

// A value of any data type
// Значення будь-якого типу
requiredAny: PropTypes.any.isRequired,

// You can also specify a custom validator. It should return an Error
Comment thread
vburlai marked this conversation as resolved.
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
// Ви також можете вказати власну функцію-валідатор. Вона повинна повернути об'єкт
// Error, якщо валідація не пройшла. Не викликайте `console.warn` і не генеруйте виняткову
// ситуацію, так як це не працюватиме всередині конструкції `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
'Проп `' + propName + '` переданий компоненту ' +
' `' + componentName + '` має невірне значення.'
);
}
},

// 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.
// Ви також можете вказати власну функцію-валідатор для `arrayOf` та `objectOf`.
// Вона повинна повернути об'єкт Error, якщо валідація не пройшла.
// Вказана функція буде викликана для кожного ключа об'єкта або індексу масиву.
// Першим аргументом у функцію-валідатор буде передано сам об'єкт або масив,
// а другим — ключ/індекс поточного елементу.
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.'
'Проп `' + propFullName + '` переданий компоненту ' +
' `' + componentName + '` має невірне значення.'
);
}
})
};
```

### Requiring Single Child {#requiring-single-child}
### Вимога єдиного дочірнього елемента {#requiring-single-child}

With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
З `PropTypes.element` ви можете вказати, що лише один елемент може бути переданий компоненту в якості дочірнього.

```javascript
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
// Це повинен бути саме один елемент бо інакше з'явиться попередження.
const children = this.props.children;
return (
<div>
Expand All @@ -143,45 +143,45 @@ MyComponent.propTypes = {
};
```

### Default Prop Values {#default-prop-values}
### Значення пропсів за замовчуванням {#default-prop-values}

You can define default values for your `props` by assigning to the special `defaultProps` property:
Ви можете задати значення за замовчуванням для ваших пропсів присвоївши спеціальну властивість `defaultProps`:

```javascript
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
<h1>Привіт, {this.props.name}</h1>
);
}
}

// Specifies the default values for props:
// Задає значення пропсів за замовчуванням:
Greeting.defaultProps = {
name: 'Stranger'
name: 'Незнайомець'
};

// Renders "Hello, Stranger":
// Рендерить "Привіт, Незнайомець":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
```

If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
Якщо ви використовуєте Babel-плагін для трансформації коду [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), то ви можете задати `defaultProps` як статичну властивість класу React-компонента. Цей синтаксис ще поки не затверджено і він буде потребувати кроку компіляції для того, щоб ваш компонент працював у браузері. Щоб дізнатись більше, дивіться [пропозицію про поля класу](https://github.com/tc39/proposal-class-fields).

```javascript
class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
name: 'Незнайомець'
}

render() {
return (
<div>Hello, {this.props.name}</div>
<div>Привіт, {this.props.name}</div>
)
}
}
```

The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
Властивість `defaultProps` гарантує, що `this.props.name` матиме значення, навіть якщо воно не було задане батьківським компонентом. Перевірка типів `propTypes` відбувається після застосування `defaultProps`, тобто вона також буде застосована для `defaultProps`.