diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index edada2741..5370d5dc5 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -4,73 +4,73 @@ title: Inoltrare Refs permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +L'inoltro delle ref è una tecnica per passare automaticamente una [ref](/docs/refs-and-the-dom.html) attraverso un componente ad uno dei suoi figli. Tipicamente questo non è necessario per la maggior parte dei componenti dell'applicazione. Può comunque essere molto utile per alcuni tipi di componenti, specialmente per i componenti riusabili appartenenti alle librerie. Lo scenario più comune è descritto di seguito. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## Inoltro delle refs ai componenti del DOM {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: -`embed:forwarding-refs/fancy-button-simple.js` +Considera di avere un componente `FancyButton` che renderizza l'elemento nativo del DOM `button` +:`embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +I componenti React nascondono i dettagli della loro implementazione, incluso il loro output renderizzato. Altri componenti che usano `FancyButton` **solitamente non hanno bisogno di** [ottenere una ref](/docs/refs-and-the-dom.html) dell'elemento interno del DOM `button`. Ciò è ottimo perché previene ai componenti di affidarsi troppo alla struttura DOM l'uno dell'altro. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Sebbene questa incapsulazione sia desiderabile per componenti a livello applicativo come `FeedStory` o `Comment`, può essere conveniente per componenti "foglia" altamente riutilizzabili come `FancyButton` o `MyTextInput`. Questi componenti tendono ad essere utilizzati attraverso l'applicazione in modo simile agli elementi del DOM `button` e `input` e l'accesso ai loro nodi DOM può essere inevitabile per la gestione di messa a fuoco, selezione, o animazioni. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** +**L'inoltro delle refs è una feature opt-in che permette ad alcuni componenti di prendere le `ref` che ricevono e passarle in basso (in altre parole avanti) ai suoi figli.** -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +Nell'esempio seguente, `FancyButton` utilizza `React.forwardRef` per ottenere la `ref` passata, dopodiché la passa all'elemento del DOM `button` che la renderizza: `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +In questo modo i componenti che usano `FancyButton` possono ottenere una ref al nodo del DOM `button` e accedervi, se necessario, proprio come se utilizzassero l'elemento del DOM `button` direttamente. -Here is a step-by-step explanation of what happens in the above example: +Qui puoi trovare una spiegazione passo passo di quello che succede nel precedente esempio: -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to `