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
* Italian translation of the page
* Update content/docs/fragments.md
* Update content/docs/fragments.md
Co-authored-by: Alessandro De Blasis <[email protected]>
Copy file name to clipboardExpand all lines: content/docs/fragments.md
+17-17
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: Frammenti
4
4
permalink: docs/fragments.html
5
5
---
6
6
7
-
A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
7
+
Un modello comune in React è di restituire molteplici elementi per un componente. I frammenti ti consentono di raggruppare una lista di figli senza aggiungere nodi extra al DOM.
8
8
9
9
```js
10
10
render() {
@@ -18,11 +18,11 @@ render() {
18
18
}
19
19
```
20
20
21
-
There is also a new [short syntax](#short-syntax)for declaring them.
21
+
C'è anche una nuova [sintassi breve](#short-syntax)per dichiararli.
22
22
23
-
## Motivation {#motivation}
23
+
## Motivazione {#motivation}
24
24
25
-
A common pattern is for a component to return a list of children. Take this example React snippet:
25
+
Un modello comune per un componente è di restituire una lista di figli. Guarda questo esempio di una parte del codice React:
26
26
27
27
```jsx
28
28
classTableextendsReact.Component {
@@ -38,7 +38,7 @@ class Table extends React.Component {
38
38
}
39
39
```
40
40
41
-
`<Columns />`would need to return multiple `<td>`elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()`of`<Columns />`, then the resulting HTML will be invalid.
41
+
`<Columns />`avrebbe bisogno di restituire multipli elementi `<td>` in ordine per affinchè l'HTML renderizzato sia valido. Se un parente div è stato usato dentro il `render()`di`<Columns />`, l'HTML risultante non sarà valido.
42
42
43
43
```jsx
44
44
classColumnsextendsReact.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
53
53
}
54
54
```
55
55
56
-
results in a `<Table />`output of:
56
+
genererà in `<Table />`il seguente risultato:
57
57
58
58
```jsx
59
59
<table>
@@ -66,9 +66,9 @@ results in a `<Table />` output of:
66
66
</table>
67
67
```
68
68
69
-
Fragments solve this problem.
69
+
I frammenti risolvono questo problema.
70
70
71
-
## Usage {#usage}
71
+
## Utilizzo {#usage}
72
72
73
73
```jsx{4,7}
74
74
class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
83
83
}
84
84
```
85
85
86
-
which results in a correct `<Table />`output of:
86
+
che darà in `<Table />`un corretto risultato:
87
87
88
88
```jsx
89
89
<table>
@@ -94,9 +94,9 @@ which results in a correct `<Table />` output of:
94
94
</table>
95
95
```
96
96
97
-
### Short Syntax {#short-syntax}
97
+
### Sintassi Breve {#short-syntax}
98
98
99
-
There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
99
+
C'è una nuova e breve sintassi che puoi usare per dichiarare i frammenti. Sembra come se avessimo dei tag vuoti:
100
100
101
101
```jsx{4,7}
102
102
class Columns extends React.Component {
@@ -111,11 +111,11 @@ class Columns extends React.Component {
111
111
}
112
112
```
113
113
114
-
You can use `<></>`the same way you'd use any other element except that it doesn't support keys or attributes.
114
+
Puoi utilizzare `<></>`allo stesso modo in cui hai utilizzato ogni altro elemento, ad eccezione che questa sintassi non supporta chiavi e attributi.
115
115
116
-
### Keyed Fragments {#keyed-fragments}
116
+
### Frammenti Chiave {#keyed-fragments}
117
117
118
-
Fragments declared with the explicit `<React.Fragment>`syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
118
+
I frammenti dichiarati con l'esplicita sintassi `<React.Fragment>`possono avere chiavi. Un caso di utilizzo può essere mappare una collezione su un array di frammenti -- per esempio, per creare una lista di descrizioni:
119
119
120
120
```jsx
121
121
functionGlossary(props) {
@@ -133,8 +133,8 @@ function Glossary(props) {
133
133
}
134
134
```
135
135
136
-
`key`is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
136
+
`key`è l'unico attributo che può essere accettato da `Fragment`. In futuro, potremo aggiungere un supporto per attributi aggiuntivi, come per i gestori di eventi.
137
137
138
-
### Live Demo {#live-demo}
138
+
### Dimostrazione dal vivo {#live-demo}
139
139
140
-
You can try out the new JSX fragment syntax with this[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
140
+
Puoi provare la nuova sintassi del frammento JSX con questo[CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
0 commit comments