diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index db42bfae0..765c2f28a 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -1,18 +1,25 @@ --- title: forwardRef +translationStatus: ai-draft --- + + +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/forwardRef.md). + + + -In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. +In React 19, `forwardRef` non è più necessario. Passa `ref` come prop. -`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). +`forwardRef` sarà deprecato in una futura release. Scopri di più [qui](/blog/2024/04/25/react-19#ref-as-a-prop). -`forwardRef` lets your component expose a DOM node to the parent component with a [ref.](/learn/manipulating-the-dom-with-refs) +`forwardRef` ti permette di esporre un nodo DOM al componente genitore con un [ref.](/learn/manipulating-the-dom-with-refs) ```js const SomeComponent = forwardRef(render) @@ -28,7 +35,7 @@ const SomeComponent = forwardRef(render) ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +Chiama `forwardRef()` per far sì che il tuo componente riceva un ref e lo inoltri a un componente figlio: ```js import { forwardRef } from 'react'; @@ -38,26 +45,26 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[Vedi altri esempi sotto.](#usage) #### Parameters {/*parameters*/} -* `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component. +* `render`: La funzione render del tuo componente. React chiama questa funzione con le props e il `ref` che il tuo componente ha ricevuto dal genitore. Il JSX che restituisci sarà l'output del tuo componente. #### Returns {/*returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop. +`forwardRef` restituisce un componente React che puoi renderizzare in JSX. A differenza dei componenti React definiti come funzioni semplici, un componente restituito da `forwardRef` può anche ricevere una prop `ref`. #### Caveats {/*caveats*/} -* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored. +* In Strict Mode, React **chiamerà la tua funzione render due volte** per [aiutarti a trovare impurità accidentali.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) Questo comportamento vale solo in sviluppo e non influisce sulla produzione. Se la tua funzione render è pura (come dovrebbe essere), non dovrebbe influire sulla logica del tuo componente. Il risultato di una delle chiamate verrà ignorato. --- -### `render` function {/*render-function*/} +### Funzione `render` {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` accetta una funzione render come argomento. React chiama questa funzione con `props` e `ref`: ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -72,21 +79,21 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### Parameters {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: Le props passate dal componente genitore. -* `ref`: The `ref` attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle) +* `ref`: L'attributo `ref` passato dal componente genitore. Il `ref` può essere un oggetto o una funzione. Se il componente genitore non ha passato un ref, sarà `null`. Dovresti inoltrare il `ref` che ricevi a un altro componente oppure passarlo a [`useImperativeHandle`.](/reference/react/useImperativeHandle) #### Returns {/*render-returns*/} -`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef` is able to take a `ref` prop. +`forwardRef` restituisce un componente React che puoi renderizzare in JSX. A differenza dei componenti React definiti come funzioni semplici, il componente restituito da `forwardRef` può ricevere una prop `ref`. --- ## Usage {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### Esporre un nodo DOM al componente genitore {/*exposing-a-dom-node-to-the-parent-component*/} -By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`: +Per impostazione predefinita, i nodi DOM di ogni componente sono privati. A volte però è utile esporre un nodo DOM al genitore — ad esempio, per metterlo a fuoco. Per attivare questa opzione, avvolgi la definizione del componente in `forwardRef()`: ```js {3,11} import { forwardRef } from 'react'; @@ -102,7 +109,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose: +Riceverai un ref come secondo argomento dopo le props. Passalo al nodo DOM che vuoi esporre: ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -118,7 +125,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -This lets the parent `Form` component access the `` DOM node exposed by `MyInput`: +Questo permette al componente genitore `Form` di accedere al nodo DOM `` esposto da `MyInput`: ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -139,15 +146,15 @@ function Form() { } ``` -This `Form` component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput` component *forwards* that ref to the `` browser tag. As a result, the `Form` component can access that `` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it. +Questo componente `Form` [passa un ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) a `MyInput`. Il componente `MyInput` *inoltra* quel ref al tag browser ``. Di conseguenza, il componente `Form` può accedere a quel nodo DOM `` e chiamare [`focus()`](https://developer.mozilla.org/it/docs/Web/API/HTMLElement/focus) su di esso. -Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment. +Tieni presente che esporre un ref al nodo DOM interno al tuo componente complica il cambiamento dei dettagli interni in seguito. In genere esporrai nodi DOM da componenti riutilizzabili di basso livello come pulsanti o campi di testo, ma non lo farai per componenti a livello applicativo come un avatar o un commento. - + -#### Focusing a text input {/*focusing-a-text-input*/} +#### Mettere a fuoco un campo di testo {/*focusing-a-text-input*/} -Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser ``. This lets the `Form` component focus the ``. +Cliccando il pulsante metterai a fuoco l'input. Il componente `Form` definisce un ref e lo passa al componente `MyInput`. Il componente `MyInput` inoltra quel ref al `` del browser. Questo permette al componente `Form` di mettere a fuoco l'``. @@ -199,9 +206,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### Riprodurre e mettere in pausa un video {/*playing-and-pausing-a-video*/} -Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) and [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `