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
Copy file name to clipboardExpand all lines: src/content/reference/react/createRef.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: createRef
4
4
5
5
<Pitfall>
6
6
7
-
`createRef`is mostly used for [class components.](/reference/react/Component)Function components typically rely on [`useRef`](/reference/react/useRef)instead.
7
+
`createRef`в основном используется для [классовых компонентов.](/reference/react/Component)Функциональные компоненты обычно используют [`useRef`](/reference/react/useRef)вместо этого.
8
8
9
9
</Pitfall>
10
10
11
11
<Intro>
12
12
13
-
`createRef`creates a [ref](/learn/referencing-values-with-refs)object which can contain arbitrary value.
13
+
`createRef`создаёт [реф](/learn/referencing-values-with-refs)объект, который может содержать произвольное значение.
14
14
15
15
```js
16
16
classMyInputextendsComponent {
@@ -25,11 +25,11 @@ class MyInput extends Component {
25
25
26
26
---
27
27
28
-
## Reference {/*reference*/}
28
+
## Справочник {/*reference*/}
29
29
30
30
### `createRef()` {/*createref*/}
31
31
32
-
Call`createRef` to declare a [ref](/learn/referencing-values-with-refs)inside a [class component.](/reference/react/Component)
32
+
Вызовите`createRef`, чтобы объявить [реф](/learn/referencing-values-with-refs)внутри [классового компонента.](/reference/react/Component)
33
33
34
34
```js
35
35
import { createRef, Component } from'react';
@@ -40,31 +40,31 @@ class MyComponent extends Component {
40
40
// ...
41
41
```
42
42
43
-
[See more examples below.](#usage)
43
+
[См. больше примеров ниже.](#usage)
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### Параметры {/*parameters*/}
46
46
47
-
`createRef`takes no parameters.
47
+
`createRef`не принимает параметров.
48
48
49
-
#### Returns {/*returns*/}
49
+
#### Возвращает {/*returns*/}
50
50
51
-
`createRef`returns an object with a single property:
51
+
`createRef`возвращает объект с одним свойством:
52
52
53
-
* `current`: Initially, it's set to the `null`. You can later set it to something else. If you pass the ref object to React as a`ref`attribute to a JSX node, React will set its`current` property.
53
+
* `current`: Изначально установлено в `null`. Вы можете изменить это значение позже. Если вы передадите реф-объект React как атрибут`ref`узлу JSX, React установит его свойство`current`.
54
54
55
-
#### Caveats {/*caveats*/}
55
+
#### Ограничения {/*caveats*/}
56
56
57
-
* `createRef`always returns a *different* object. It's equivalent to writing `{ current:null }`yourself.
58
-
* In a function component, you probably want [`useRef`](/reference/react/useRef) instead which always returns the same object.
* В функциональном компоненте вам, вероятно, понадобится [`useRef`](/reference/react/useRef) вместо этого, который всегда возвращает один и тот же объект.
### Declaring a ref in a class component {/*declaring-a-ref-in-a-class-component*/}
65
+
### Объявление рефа в классовом компоненте {/*declaring-a-ref-in-a-class-component*/}
66
66
67
-
To declare a ref inside a [class component,](/reference/react/Component) call`createRef`and assign its result to a class field:
67
+
Чтобы объявить реф внутри [классового компонента,](/reference/react/Component) вызовите`createRef`и присвойте результат полю класса:
68
68
69
69
```js {4}
70
70
import { Component, createRef } from'react';
@@ -76,7 +76,7 @@ class Form extends Component {
76
76
}
77
77
```
78
78
79
-
If you now pass`ref={this.inputRef}`to an `<input>`in your JSX, React will populate `this.inputRef.current`with the input DOM node. For example, here is how you make a button that focuses the input:
79
+
Если вы теперь передадите`ref={this.inputRef}`элементу `<input>`в вашем JSX, React заполнит `this.inputRef.current` DOM-узлом ввода. Например, вот как сделать кнопку, которая фокусирует ввод:
80
80
81
81
<Sandpack>
82
82
@@ -107,17 +107,17 @@ export default class Form extends Component {
107
107
108
108
<Pitfall>
109
109
110
-
`createRef`is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
110
+
`createRef`в основном используется для [классовых компонентов.](/reference/react/Component) Функциональные компоненты обычно используют [`useRef`](/reference/react/useRef) вместо этого.
111
111
112
112
</Pitfall>
113
113
114
114
---
115
115
116
-
## Alternatives {/*alternatives*/}
116
+
## Альтернативы {/*alternatives*/}
117
117
118
-
### Migrating from a class with `createRef`to a function with`useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
118
+
### Миграция из класса с `createRef`в функцию с`useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
119
119
120
-
We recommend using function components instead of [class components](/reference/react/Component) in new code. If you have some existing class components using`createRef`, here is how you can convert them. This is the original code:
120
+
Мы рекомендуем использовать функциональные компоненты вместо [классовых компонентов](/reference/react/Component) в новом коде. Если у вас есть существующие классовые компоненты, использующие`createRef`, вот как вы можете их преобразовать. Это оригинальный код:
121
121
122
122
<Sandpack>
123
123
@@ -146,7 +146,7 @@ export default class Form extends Component {
146
146
147
147
</Sandpack>
148
148
149
-
When you [convert this component from a class to a function,](/reference/react/Component#alternatives) replace calls to `createRef`with calls to [`useRef`:](/reference/react/useRef)
149
+
При [преобразовании этого компонента из класса в функцию](/reference/react/Component#alternatives) замените вызовы `createRef`вызовами [`useRef`:](/reference/react/useRef)
150
150
151
151
<Sandpack>
152
152
@@ -171,4 +171,4 @@ export default function Form() {
0 commit comments