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`é usado principalmente para [componentes de classe.](/reference/react/Component)Componentes de função normalmente dependem de [`useRef`](/reference/react/useRef)em vez disso.
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`cria um objeto [ref](/learn/referencing-values-with-refs)que pode conter um valor arbitrário.
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
+
## Referência {/*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
+
Chame`createRef`para declarar um[ref](/learn/referencing-values-with-refs)dentro de um [componente de classe.](/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
+
[Veja mais exemplos abaixo.](#usage)
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### Parâmetros {/*parameters*/}
46
46
47
-
`createRef`takes no parameters.
47
+
`createRef`não recebe parâmetros.
48
48
49
-
#### Returns {/*returns*/}
49
+
#### Retorna {/*returns*/}
50
50
51
-
`createRef`returns an object with a single property:
51
+
`createRef`retorna um objeto com uma única propriedade:
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`: Inicialmente, é definido como `null`. Você pode, mais tarde, defini-lo para outra coisa. Se você passar o objeto ref para React como um atributo `ref`para um nó JSX, React definirá sua propriedade`current`.
54
54
55
-
#### Caveats {/*caveats*/}
55
+
#### Ressalvas {/*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.
### Declaring a ref in a class component {/*declaring-a-ref-in-a-class-component*/}
65
+
### Declarando um ref em um componente de classe {/*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
+
Para declarar um ref dentro de um [componente de classe,](/reference/react/Component) chame`createRef`e atribua seu resultado a um campo de classe:
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
+
Se agora você passar`ref={this.inputRef}`para um`<input>`em seu JSX, React preencherá `this.inputRef.current`com o nó DOM de entrada. Por exemplo, aqui está como você faz um botão que foca na entrada:
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`é usado principalmente para [componentes de classe.](/reference/react/Component) Componentes de função normalmente dependem de [`useRef`](/reference/react/useRef) em vez disso.
111
111
112
112
</Pitfall>
113
113
114
114
---
115
115
116
-
## Alternatives {/*alternatives*/}
116
+
## Alternativas {/*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
+
### Migrando de uma classe com`createRef`para uma função com`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
+
Recomendamos o uso de componentes de função em vez de [componentes de classe](/reference/react/Component) em código novo. Se você tiver alguns componentes de classe existentes usando `createRef`, aqui está como você pode convertê-los. Este é o código original:
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
+
Quando você [converte este componente de uma classe para uma função,](/reference/react/Component#alternatives) substitua as chamadas para `createRef`por chamadas para [`useRef`:](/reference/react/useRef)
150
150
151
151
<Sandpack>
152
152
@@ -171,4 +171,4 @@ export default function Form() {
0 commit comments