You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> `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).
11
+
> С версии React 15.5 `React.PropTypes`были вынесены в отдельный пакет. Так что используйте [библиотеку`prop-types`](https://www.npmjs.com/package/prop-types).
12
12
>
13
-
>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
13
+
>Вы можете использовать [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes), чтобы провести замену в коде на использование этой библиотеки.
14
14
15
-
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:
15
+
По мере роста вашего приложения вы можете отловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/)и[TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`:
16
16
17
17
```javascript
18
18
importPropTypesfrom'prop-types';
19
19
20
20
classGreetingextendsReact.Component {
21
21
render() {
22
22
return (
23
-
<h1>Hello, {this.props.name}</h1>
23
+
<h1>Привет, {this.props.name}</h1>
24
24
);
25
25
}
26
26
}
@@ -30,18 +30,18 @@ Greeting.propTypes = {
30
30
};
31
31
```
32
32
33
-
`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.
33
+
`PropTypes`предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные корректны. В примере мы использовали `PropTypes.string`. Когда какой-то проп имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности`propTypes`проверяются только в режиме разработки.
34
34
35
35
### PropTypes {#proptypes}
36
36
37
-
Here is an example documenting the different validators provided:
37
+
Пример использования возможных валидаторов:
38
38
39
39
```javascript
40
40
importPropTypesfrom'prop-types';
41
41
42
42
MyComponent.propTypes= {
43
-
//You can declare that a prop is a specific JS type. By default, these
44
-
//are all optional.
43
+
//Можно объявить проп на соответствиее определённому JS-типу.
44
+
//По умолчанию это не обязательно.
45
45
optionalArray:PropTypes.array,
46
46
optionalBool:PropTypes.bool,
47
47
optionalFunc:PropTypes.func,
@@ -50,85 +50,90 @@ MyComponent.propTypes = {
50
50
optionalString:PropTypes.string,
51
51
optionalSymbol:PropTypes.symbol,
52
52
53
-
// Anything that can be rendered: numbers, strings, elements or an array
54
-
// (or fragment) containing these types.
53
+
// Все, что может быть отренедерено:
54
+
// числа, строки, элементы или массивы
55
+
// (или фрагменты) содержащие эти типы
55
56
optionalNode:PropTypes.node,
56
57
57
-
//A React element.
58
+
// React-элемент
58
59
optionalElement:PropTypes.element,
59
60
60
-
//You can also declare that a prop is an instance of a class. This uses
61
-
//JS's instanceof operator.
61
+
//Можно указать, что проп должен быть экземпляром класса
62
+
//Для этого используется оператор `instanceof`.
62
63
optionalMessage:PropTypes.instanceOf(Message),
63
64
64
-
//You can ensure that your prop is limited to specific values by treating
' `'+ componentName +'` имеет неправильное значение'
116
120
);
117
121
}
118
122
})
119
123
};
120
124
```
121
125
122
-
### Requiring Single Child {#requiring-single-child}
126
+
### Ограничение на один дочерний компонент {#requiring-single-child}
123
127
124
-
With `PropTypes.element`you can specify that only a single child can be passed to a component as children.
128
+
С помощью `PropTypes.element`вы можете указать, что в качестве дочернего может быть передан только один элемент.
125
129
126
130
```javascript
127
131
importPropTypesfrom'prop-types';
128
132
129
133
classMyComponentextendsReact.Component {
130
134
render() {
131
-
// This must be exactly one element or it will warn.
135
+
// Это должен быть ровно один элемент.
136
+
// Иначе вы увидете предупреждение
132
137
constchildren=this.props.children;
133
138
return (
134
139
<div>
@@ -143,45 +148,45 @@ MyComponent.propTypes = {
143
148
};
144
149
```
145
150
146
-
### Default Prop Values {#default-prop-values}
151
+
### Значения пропсов по умолчанию {#default-prop-values}
147
152
148
-
You can define default values for your `props`by assigning to the special `defaultProps` property:
153
+
Вы можете задать значения по умолчанию для ваших `props`с помощью специального свойства `defaultProps`:
149
154
150
155
```javascript
151
156
classGreetingextendsReact.Component {
152
157
render() {
153
158
return (
154
-
<h1>Hello, {this.props.name}</h1>
159
+
<h1>Привет, {this.props.name}</h1>
155
160
);
156
161
}
157
162
}
158
163
159
-
//Specifies the default values for props:
164
+
//Задание значений по умолчанию для пропсов:
160
165
Greeting.defaultProps= {
161
-
name:'Stranger'
166
+
name:'Незнакомец'
162
167
};
163
168
164
-
//Renders "Hello, Stranger":
169
+
//Отрендерит "Привет, Незнакомец":
165
170
ReactDOM.render(
166
171
<Greeting />,
167
172
document.getElementById('example')
168
173
);
169
174
```
170
175
171
-
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).
176
+
Если вы используете один из Babel-плагинов по преобразованию кода, вроде [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), то можете объявить `defaultProps`как статическое свойство класса (для компонента-наследника от `React.Component`). Этот синтаксис еще не утвержден, так что для его работы в браузере нужна компиляция. Подробнее смотрите в [предложении о полях класса](https://github.com/tc39/proposal-class-fields).
172
177
173
178
```javascript
174
179
classGreetingextendsReact.Component {
175
180
static defaultProps = {
176
-
name:'stranger'
181
+
name:'незнакомец'
177
182
}
178
183
179
184
render() {
180
185
return (
181
-
<div>Hello, {this.props.name}</div>
186
+
<div>Привет, {this.props.name}</div>
182
187
)
183
188
}
184
189
}
185
190
```
186
191
187
-
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`.
192
+
Определение`defaultProps`гарантирует, что `this.props.name`будет иметь значение, даже если оно не было указано родительским компонентом. Сначала применяются значения по умолчанию, заданные в `defaultProps`. После запускается проверка типов с помощью `propTypes`. Так что проверка типов распространяется и на значения по умолчанию.
0 commit comments