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
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
11
+
React ha un potente modello di composizione, raccomandiamo che lo si usi in alternativa all'ereditarietà per riutilizzare codice tra componenti.
12
12
13
-
In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.
13
+
In questa sezione, considereremo alcuni problemi nei quali gli sviluppatori che sono ancora agli inizi in React utilizzano l'ereditarietà, mostreremo come si possa invece risolverli con la composizione.
14
14
15
-
## Containment {#containment}
15
+
## Contentimento {#containment}
16
16
17
-
Some components don't know their children ahead of time. This is especially common for components like `Sidebar`or `Dialog`that represent generic "boxes".
17
+
Esistono componenti che si comportano da contenitori per altri componenti, non possono quindi sapere a priori quali componenti avranno come figli. Si pensi ad esempio a `Sidebar`(barra laterale) oppure `Dialog`(finestra di dialogo) che rappresentano "scatole" generiche.
18
18
19
-
We recommend that such components use the special `children`prop to pass children elements directly into their output:
19
+
Raccomandiamo che questi componenti facciano uso della prop speciale `children`per passare elementi figli direttamente nell'output:
This lets other components pass arbitrary children to them by nesting the JSX:
31
+
Ciò permette di passare componenti figli arbitrariamente annidandoli nel codice JSX:
32
32
33
-
```js{4-9}
34
-
function WelcomeDialog() {
33
+
```js{4-8}
34
+
function FinestraBenvenuto() {
35
35
return (
36
-
<FancyBorder color="blue">
37
-
<h1 className="Dialog-title">
38
-
Welcome
39
-
</h1>
40
-
<p className="Dialog-message">
41
-
Thank you for visiting our spacecraft!
36
+
<BordoFigo colore="blue">
37
+
<h1 className="Finestra-titolo">Benvenuto/a!</h1>
38
+
<p className="Finestra-messaggio">
39
+
Ti ringraziamo per questa tua visita nella nostra
40
+
nave spaziale!
42
41
</p>
43
-
</FancyBorder>
42
+
</BordoFigo>
44
43
);
45
44
}
46
45
```
47
46
48
-
**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**
47
+
**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/1.js,composition-vs-inheritance/1.css)**
49
48
50
-
Anything inside the `<FancyBorder>`JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders`{props.children}`inside a `<div>`, the passed elements appear in the final output.
49
+
Il contenuto del tag JSX `<BordoFigo>`viene passato nel componente `BordoFigo` come prop `children`. Dato che `BordoFigo` renderizza`{props.children}`all'interndo di un `<div>`, gli elementi passati appaiono nell'output finale.
51
50
52
-
While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using`children`:
51
+
Anche se si tratta di un approccio meno comune, a volte potresti ritrovarti ad aver bisongno di più di un "buco" all'interno di un componente. In questi casi potresti creare una tua convenzione invece di ricorrere all'uso di`children`:
[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
72
+
**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/2.js,composition-vs-inheritance/2.css)**
73
+
82
74
83
-
React elements like`<Contacts />`and`<Chat />`are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React.
75
+
Gli elementi React`<Contatti />`e`<Chat />`sono dei semplici oggetti, quindi puoi passarli come props esattamente come faresti con altri dati. Questo approccio potrebbe ricordarti il concetto di "slots" in altre librerie, ma non ci sono limitazioni su cosa puoi passare come props in React.
84
76
85
-
## Specialization {#specialization}
77
+
## Specializzazioni {#specialization}
86
78
87
-
Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.
79
+
A volte pensiamo ai componenti come se fossero "casi speciali" di altri componenti. Ad esempio, potremmo dire che `FinestraBenvenuto` è una specializzazione di `Finestra`.
88
80
89
-
In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
81
+
In React, ciò si ottiene mediante composizione, dove componenti più "specifici" renderizzano la versione più "generica" configurandola mediante props:
class FinestraRegistrazione extends React.Component {
134
125
constructor(props) {
135
126
super(props);
136
127
this.handleChange = this.handleChange.bind(this);
@@ -140,14 +131,17 @@ class SignUpDialog extends React.Component {
140
131
141
132
render() {
142
133
return (
143
-
<Dialog title="Mars Exploration Program"
144
-
message="How should we refer to you?">
145
-
<input value={this.state.login}
146
-
onChange={this.handleChange} />
134
+
<Finestra
135
+
titolo="Programma di Esplorazione di Marte"
136
+
messaggio="Qual'è il tuo nome?">
137
+
<input
138
+
value={this.state.login}
139
+
onChange={this.handleChange}
140
+
/>
147
141
<button onClick={this.handleSignUp}>
148
-
Sign Me Up!
142
+
Registrami!
149
143
</button>
150
-
</Dialog>
144
+
</Finestra>
151
145
);
152
146
}
153
147
@@ -156,17 +150,18 @@ class SignUpDialog extends React.Component {
156
150
}
157
151
158
152
handleSignUp() {
159
-
alert(`Welcome aboard, ${this.state.login}!`);
153
+
alert(`Benvenuto/a a bordo, ${this.state.login}!`);
160
154
}
161
155
}
162
156
```
163
157
164
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
158
+
**[Prova su CodeSandbox](codesandbox://composition-vs-inheritance/4.js,composition-vs-inheritance/4.css)**
159
+
165
160
166
-
## So What About Inheritance? {#so-what-about-inheritance}
161
+
## E per quanto riguarda l'ereditarietà? {#so-what-about-inheritance}
167
162
168
-
At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
163
+
In Facebook, usiamo React in migliaia di componenti ma non abbiamo mai avuto alcun caso in cui sarebbe raccomandabile utilizzare gerarchie di ereditarietà per i componenti.
169
164
170
-
Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
165
+
Le props e la composizione ti offrono tutta la flessibilità di cui hai bisogno per personalizzare l'aspetto ed il comportamento di un componente in modo esplicito e sicuro. Ricorda che i componenti possono accettare props arbitrarie, inclusi valori primitivi, elementi React o funzioni.
171
166
172
-
If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
167
+
Se vuoi riutilizzare le funzionalità non strettamente legate alla UI tra componenti, suggeriamo di estrarre tali logiche all'interno di un modulo JavaScript separato. I componenti potranno quindi importarlo ed utilizzare quella funzione, oggetto o classe di cui hanno bisogno, senza dover estendere tale modulo.
0 commit comments