` container. For example, let's say the parent component passes three `
` tags as the `children` prop to `RowList`:
+Nell'esempio sopra, `RowList` avvolge ogni child che riceve in un contenitore `
`. Ad esempio, supponiamo che il componente genitore passi tre tag `
` come prop `children` a `RowList`:
```js
@@ -224,7 +231,7 @@ In the example above, the `RowList` wraps every child it receives into a `
```
-Then, with the `RowList` implementation above, the final rendered result will look like this:
+Poi, con l'implementazione di `RowList` sopra, il risultato finale renderizzato sarà simile a questo:
```js
@@ -240,7 +247,7 @@ Then, with the `RowList` implementation above, the final rendered result will lo
```
-`Children.map` is similar to [to transforming arrays with `map()`.](/learn/rendering-lists) The difference is that the `children` data structure is considered *opaque.* This means that even if it's sometimes an array, you should not assume it's an array or any other particular data type. This is why you should use `Children.map` if you need to transform it.
+`Children.map` è simile a [trasformare array con `map()`.](/learn/rendering-lists) La differenza è che la struttura dati `children` è considerata *opaca.* Ciò significa che, anche se a volte è un array, non dovresti assumere che lo sia o che abbia un altro tipo di dato particolare. Per questo motivo, se devi trasformarla, dovresti usare `Children.map`.
@@ -293,24 +300,24 @@ export default function RowList({ children }) {
-#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/}
+#### Perché la prop `children` non è sempre un array? {/*why-is-the-children-prop-not-always-an-array*/}
-In React, the `children` prop is considered an *opaque* data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods.
+In React, la prop `children` è considerata una struttura dati *opaca*. Ciò significa che non dovresti fare affidamento su come è strutturata. Per trasformare, filtrare o contare i children, dovresti usare i metodi `Children`.
-In practice, the `children` data structure is often represented as an array internally. However, if there is only a single child, then React won't create an extra array since this would lead to unnecessary memory overhead. As long as you use the `Children` methods instead of directly introspecting the `children` prop, your code will not break even if React changes how the data structure is actually implemented.
+In pratica, la struttura dati `children` è spesso rappresentata internamente come un array. Tuttavia, se c'è un solo child, React non creerà un array aggiuntivo perché ciò porterebbe a un overhead di memoria non necessario. Finché usi i metodi `Children` invece di ispezionare direttamente la prop `children`, il tuo codice non si romperà anche se React cambia il modo in cui la struttura dati è effettivamente implementata.
-Even when `children` is an array, `Children.map` has useful special behavior. For example, `Children.map` combines the [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) on the returned elements with the keys on the `children` you've passed to it. This ensures the original JSX children don't "lose" keys even if they get wrapped like in the example above.
+Anche quando `children` è un array, `Children.map` ha un comportamento speciale utile. Ad esempio, `Children.map` combina le [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) sugli elementi restituiti con le key sui `children` che gli hai passato. Questo garantisce che i children JSX originali non "perdano" le key anche se vengono avvolti come nell'esempio sopra.
-The `children` data structure **does not include rendered output** of the components you pass as JSX. In the example below, the `children` received by the `RowList` only contains two items rather than three:
+La struttura dati `children` **non include l'output renderizzato** dei componenti che passi come JSX. Nell'esempio sotto, i `children` ricevuti da `RowList` contengono solo due elementi anziché tre:
1. `This is the first item.
`
2. ``
-This is why only two row wrappers are generated in this example:
+Per questo motivo in questo esempio vengono generati solo due wrapper di riga:
@@ -369,15 +376,15 @@ export default function RowList({ children }) {
-**There is no way to get the rendered output of an inner component** like `` when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+**Non c'è modo di ottenere l'output renderizzato di un componente interno** come `` quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Running some code for each child {/*running-some-code-for-each-child*/}
+### Eseguire del codice per ogni child {/*running-some-code-for-each-child*/}
-Call `Children.forEach` to iterate over each child in the `children` data structure. It does not return any value and is similar to the [array `forEach` method.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) You can use it to run custom logic like constructing your own array.
+Chiama `Children.forEach` per iterare su ogni child nella struttura dati `children`. Non restituisce alcun valore ed è simile al [metodo `forEach` degli array.](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) Puoi usarlo per eseguire logica personalizzata, come costruire il tuo array.
@@ -413,15 +420,15 @@ export default function SeparatorList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Counting children {/*counting-children*/}
+### Contare i children {/*counting-children*/}
-Call `Children.count(children)` to calculate the number of children.
+Chiama `Children.count(children)` per calcolare il numero di children.
@@ -484,15 +491,15 @@ export default function RowList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
---
-### Converting children to an array {/*converting-children-to-an-array*/}
+### Convertire i children in un array {/*converting-children-to-an-array*/}
-Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
+Chiama `Children.toArray(children)` per trasformare la struttura dati `children` in un normale array JavaScript. Questo ti permette di manipolare l'array con i metodi array integrati come [`filter`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) o [`reverse`.](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)
@@ -524,7 +531,7 @@ export default function ReversedList({ children }) {
-As mentioned earlier, there is no way to get the rendered output of an inner component when manipulating `children`. This is why [it's usually better to use one of the alternative solutions.](#alternatives)
+Come accennato in precedenza, non c'è modo di ottenere l'output renderizzato di un componente interno quando manipoli `children`. Per questo motivo [di solito è meglio usare una delle soluzioni alternative.](#alternatives)
@@ -534,21 +541,21 @@ As mentioned earlier, there is no way to get the rendered output of an inner com
-This section describes alternatives to the `Children` API (with capital `C`) that's imported like this:
+Questa sezione descrive alternative all'API `Children` (con la `C` maiuscola) che si importa così:
```js
import { Children } from 'react';
```
-Don't confuse it with [using the `children` prop](/learn/passing-props-to-a-component#passing-jsx-as-children) (lowercase `c`), which is good and encouraged.
+Non confonderla con [l'uso della prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) (con la `c` minuscola), che è buona pratica ed è incoraggiato.
-### Exposing multiple components {/*exposing-multiple-components*/}
+### Esporre più componenti {/*exposing-multiple-components*/}
-Manipulating children with the `Children` methods often leads to fragile code. When you pass children to a component in JSX, you don't usually expect the component to manipulate or transform the individual children.
+Manipolare i children con i metodi `Children` spesso porta a codice fragile. Quando passi children a un componente in JSX, di solito non ti aspetti che il componente manipoli o trasformi i singoli children.
-When you can, try to avoid using the `Children` methods. For example, if you want every child of `RowList` to be wrapped in ``, export a `Row` component, and manually wrap every row into it like this:
+Quando puoi, cerca di evitare l'uso dei metodi `Children`. Ad esempio, se vuoi che ogni child di `RowList` sia avvolto in `
`, esporta un componente `Row` e avvolgi manualmente ogni riga così:
@@ -607,7 +614,7 @@ export function Row({ children }) {
-Unlike using `Children.map`, this approach does not wrap every child automatically. **However, this approach has a significant benefit compared to the [earlier example with `Children.map`](#transforming-children) because it works even if you keep extracting more components.** For example, it still works if you extract your own `MoreRows` component:
+A differenza dell'uso di `Children.map`, questo approccio non avvolge automaticamente ogni child. **Tuttavia, questo approccio ha un vantaggio significativo rispetto al [precedente esempio con `Children.map`](#transforming-children) perché funziona anche se continui a estrarre altri componenti.** Ad esempio, funziona ancora se estrai il tuo componente `MoreRows`:
@@ -674,13 +681,13 @@ export function Row({ children }) {
-This wouldn't work with `Children.map` because it would "see" `` as a single child (and a single row).
+Questo non funzionerebbe con `Children.map` perché "vedrebbe" `` come un singolo child (e una singola riga).
---
-### Accepting an array of objects as a prop {/*accepting-an-array-of-objects-as-a-prop*/}
+### Accettare un array di oggetti come prop {/*accepting-an-array-of-objects-as-a-prop*/}
-You can also explicitly pass an array as a prop. For example, this `RowList` accepts a `rows` array as a prop:
+Puoi anche passare esplicitamente un array come prop. Ad esempio, questo `RowList` accetta un array `rows` come prop:
@@ -729,9 +736,9 @@ export function RowList({ rows }) {
-Since `rows` is a regular JavaScript array, the `RowList` component can use built-in array methods like [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on it.
+Poiché `rows` è un normale array JavaScript, il componente `RowList` può usare metodi array integrati come [`map`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map) su di esso.
-This pattern is especially useful when you want to be able to pass more information as structured data together with children. In the below example, the `TabSwitcher` component receives an array of objects as the `tabs` prop:
+Questo pattern è particolarmente utile quando vuoi poter passare più informazioni come dati strutturati insieme ai children. Nell'esempio sotto, il componente `TabSwitcher` riceve un array di oggetti come prop `tabs`:
@@ -789,13 +796,13 @@ export default function TabSwitcher({ tabs }) {
-Unlike passing the children as JSX, this approach lets you associate some extra data like `header` with each item. Because you are working with the `tabs` directly, and it is an array, you do not need the `Children` methods.
+A differenza del passaggio dei children come JSX, questo approccio ti permette di associare alcuni dati extra come `header` a ogni elemento. Poiché lavori direttamente con `tabs`, ed è un array, non hai bisogno dei metodi `Children`.
---
-### Calling a render prop to customize rendering {/*calling-a-render-prop-to-customize-rendering*/}
+### Chiamare una render prop per personalizzare la renderizzazione {/*calling-a-render-prop-to-customize-rendering*/}
-Instead of producing JSX for every single item, you can also pass a function that returns JSX, and call that function when necessary. In this example, the `App` component passes a `renderContent` function to the `TabSwitcher` component. The `TabSwitcher` component calls `renderContent` only for the selected tab:
+Invece di produrre JSX per ogni singolo elemento, puoi anche passare una funzione che restituisce JSX e chiamarla quando necessario. In questo esempio, il componente `App` passa una funzione `renderContent` al componente `TabSwitcher`. Il componente `TabSwitcher` chiama `renderContent` solo per la tab selezionata:
@@ -844,9 +851,9 @@ export default function TabSwitcher({ tabIds, getHeader, renderContent }) {
-A prop like `renderContent` is called a *render prop* because it is a prop that specifies how to render a piece of the user interface. However, there is nothing special about it: it is a regular prop which happens to be a function.
+Una prop come `renderContent` si chiama *render prop* perché è una prop che specifica come renderizzare un pezzo dell'interfaccia utente. Tuttavia, non c'è nulla di speciale: è una prop normale che per caso è una funzione.
-Render props are functions, so you can pass information to them. For example, this `RowList` component passes the `id` and the `index` of each row to the `renderRow` render prop, which uses `index` to highlight even rows:
+Le render props sono funzioni, quindi puoi passare loro informazioni. Ad esempio, questo componente `RowList` passa l'`id` e l'`index` di ogni riga alla render prop `renderRow`, che usa `index` per evidenziare le righe pari:
@@ -927,15 +934,15 @@ export function Row({ children, isHighlighted }) {
-This is another example of how parent and child components can cooperate without manipulating the children.
+Questo è un altro esempio di come componenti genitore e figlio possono cooperare senza manipolare i children.
---
## Troubleshooting {/*troubleshooting*/}
-### I pass a custom component, but the `Children` methods don't show its render result {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
+### Passo un componente personalizzato, ma i metodi `Children` non mostrano il suo risultato di renderizzazione {/*i-pass-a-custom-component-but-the-children-methods-dont-show-its-render-result*/}
-Suppose you pass two children to `RowList` like this:
+Supponiamo di passare due children a `RowList` così:
```js
@@ -944,6 +951,6 @@ Suppose you pass two children to `RowList` like this:
```
-If you do `Children.count(children)` inside `RowList`, you will get `2`. Even if `MoreRows` renders 10 different items, or if it returns `null`, `Children.count(children)` will still be `2`. From the `RowList`'s perspective, it only "sees" the JSX it has received. It does not "see" the internals of the `MoreRows` component.
+Se esegui `Children.count(children)` dentro `RowList`, otterrai `2`. Anche se `MoreRows` renderizza 10 elementi diversi, o se restituisce `null`, `Children.count(children)` sarà comunque `2`. Dal punto di vista di `RowList`, "vede" solo il JSX che ha ricevuto. Non "vede" l'interno del componente `MoreRows`.
-The limitation makes it hard to extract a component. This is why [alternatives](#alternatives) are preferred to using `Children`.
+Questa limitazione rende difficile estrarre un componente. Per questo motivo le [alternative](#alternatives) sono preferite all'uso di `Children`.
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 5991ea5a2..30ffe5039 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -199,7 +199,7 @@
]
},
{
- "title": "Escape Hatches",
+ "title": "Soluzioni alternative",
"path": "/learn/escape-hatches",
"tags": [
"advanced"
@@ -218,7 +218,7 @@
"path": "/learn/synchronizing-with-effects"
},
{
- "title": "You Might Not Need an Effect",
+ "title": "Potresti non avere bisogno di un Effetto",
"path": "/learn/you-might-not-need-an-effect"
},
{