Skip to content

Commit 46bb302

Browse files
authored
translate(reference): createRef (#682) (#714)
Signed-off-by: Alessandro De Blasis <alex@deblasis.net>
1 parent eef5275 commit 46bb302

1 file changed

Lines changed: 27 additions & 20 deletions

File tree

src/content/reference/react/createRef.md

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
---
22
title: createRef
3+
translationStatus: ai-draft
34
---
45

6+
<Note>
7+
8+
Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un'ulteriore revisione da parte della community sarebbe comunque utile. [Migliora questa traduzione](https://github.com/reactjs/it.react.dev/edit/main/src/content/reference/react/createRef.md).
9+
10+
</Note>
11+
512
<Pitfall>
613

7-
`createRef` is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
14+
`createRef` è usato soprattutto per i [componenti classe](/reference/react/Component). I componenti funzione di solito usano [`useRef`](/reference/react/useRef).
815

916
</Pitfall>
1017

1118
<Intro>
1219

13-
`createRef` creates a [ref](/learn/referencing-values-with-refs) object which can contain arbitrary value.
20+
`createRef` crea un oggetto [ref](/learn/referencing-values-with-refs) che può contenere un valore arbitrario.
1421

1522
```js
1623
class MyInput extends Component {
@@ -29,7 +36,7 @@ class MyInput extends Component {
2936

3037
### `createRef()` {/*createref*/}
3138

32-
Call `createRef` to declare a [ref](/learn/referencing-values-with-refs) inside a [class component.](/reference/react/Component)
39+
Chiama `createRef` per dichiarare una [ref](/learn/referencing-values-with-refs) all'interno di un [componente classe](/reference/react/Component).
3340

3441
```js
3542
import { createRef, Component } from 'react';
@@ -40,31 +47,31 @@ class MyComponent extends Component {
4047
// ...
4148
```
4249
43-
[See more examples below.](#usage)
50+
[Vedi altri esempi sotto.](#usage)
4451
4552
#### Parameters {/*parameters*/}
4653
47-
`createRef` takes no parameters.
54+
`createRef` non accetta parametri.
4855
4956
#### Returns {/*returns*/}
5057
51-
`createRef` returns an object with a single property:
58+
`createRef` restituisce un oggetto con una singola proprietà:
5259
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.
60+
* `current`: inizialmente è impostato su `null`. Puoi cambiarlo in seguito con un altro valore. Se passi l'oggetto ref a React come attributo `ref` su un nodo JSX, React imposterà la sua proprietà `current`.
5461
5562
#### Caveats {/*caveats*/}
5663
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.
59-
* `const ref = useRef()` is equivalent to `const [ref, _] = useState(() => createRef(null))`.
64+
* `createRef` restituisce sempre un oggetto *diverso*. Equivale a scrivere `{ current: null }` manualmente.
65+
* In un componente funzione, probabilmente preferirai [`useRef`](/reference/react/useRef), che restituisce sempre lo stesso oggetto.
66+
* `const ref = useRef()` equivale a `const [ref, _] = useState(() => createRef(null))`.
6067
6168
---
6269
6370
## Usage {/*usage*/}
6471
65-
### Declaring a ref in a class component {/*declaring-a-ref-in-a-class-component*/}
72+
### Dichiarare una ref in un componente classe {/*declaring-a-ref-in-a-class-component*/}
6673
67-
To declare a ref inside a [class component,](/reference/react/Component) call `createRef` and assign its result to a class field:
74+
Per dichiarare una ref all'interno di un [componente classe](/reference/react/Component), chiama `createRef` e assegna il risultato a un campo di classe:
6875
6976
```js {4}
7077
import { Component, createRef } from 'react';
@@ -76,7 +83,7 @@ class Form extends Component {
7683
}
7784
```
7885
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:
86+
Se passi `ref={this.inputRef}` a un `<input>` nel tuo JSX, React popolerà `this.inputRef.current` con il nodo DOM dell'input. Ad esempio, ecco come creare un pulsante che mette a fuoco l'input:
8087
8188
<Sandpack>
8289
@@ -95,7 +102,7 @@ export default class Form extends Component {
95102
<>
96103
<input ref={this.inputRef} />
97104
<button onClick={this.handleClick}>
98-
Focus the input
105+
Metti a fuoco l'input
99106
</button>
100107
</>
101108
);
@@ -107,17 +114,17 @@ export default class Form extends Component {
107114
108115
<Pitfall>
109116
110-
`createRef` is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
117+
`createRef` è usato soprattutto per i [componenti classe](/reference/react/Component). I componenti funzione di solito usano [`useRef`](/reference/react/useRef).
111118
112119
</Pitfall>
113120
114121
---
115122
116123
## Alternatives {/*alternatives*/}
117124
118-
### Migrating from a class with `createRef` to a function with `useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
125+
### Migrare da una classe con `createRef` a una funzione con `useRef` {/*migrating-from-a-class-with-createref-to-a-function-with-useref*/}
119126
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:
127+
Nel codice nuovo consigliamo di usare componenti funzione al posto dei [componenti classe](/reference/react/Component). Se hai componenti classe esistenti che usano `createRef`, ecco come convertirli. Questo è il codice originale:
121128
122129
<Sandpack>
123130
@@ -136,7 +143,7 @@ export default class Form extends Component {
136143
<>
137144
<input ref={this.inputRef} />
138145
<button onClick={this.handleClick}>
139-
Focus the input
146+
Metti a fuoco l'input
140147
</button>
141148
</>
142149
);
@@ -146,7 +153,7 @@ export default class Form extends Component {
146153
147154
</Sandpack>
148155
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)
156+
Quando [converti questo componente da classe a funzione](/reference/react/Component#alternatives), sostituisci le chiamate a `createRef` con chiamate a [`useRef`](/reference/react/useRef):
150157
151158
<Sandpack>
152159
@@ -164,7 +171,7 @@ export default function Form() {
164171
<>
165172
<input ref={inputRef} />
166173
<button onClick={handleClick}>
167-
Focus the input
174+
Metti a fuoco l'input
168175
</button>
169176
</>
170177
);

0 commit comments

Comments
 (0)