Skip to content

Commit 4035d87

Browse files
authored
Translation of the page "Conditional rendering" (#110)
* wip: conditional-rendering * Default codepen link description * Fixes "undefined" in codepen links When using a non-empty link title (translated) we get undefined Changing the default to the translated version and leaving them empty fixes the issue * conditional-rendering: done imported codepen examples into source code I'll ask if it's the case of doing that upstream as well for better... "translatability" 😂 * bugfix: missing bits :) * prettier fixes * Highlighting offsets 🐛🔫 * Update content/docs/conditional-rendering.md Co-Authored-By: deblasis <[email protected]>
1 parent a061c89 commit 4035d87

File tree

10 files changed

+254
-105
lines changed

10 files changed

+254
-105
lines changed

content/docs/components-and-props.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ ReactDOM.render(
7676
);
7777
```
7878

79-
[**Prova in CodePen**](codepen://components-and-props/rendering-a-component)
79+
[](codepen://components-and-props/rendering-a-component)
8080

8181
Ricapitoliamo cosa succede nell'esempio:
8282

@@ -118,7 +118,7 @@ ReactDOM.render(
118118
);
119119
```
120120

121-
[**Prova in CodePen**](codepen://components-and-props/composing-components)
121+
[](codepen://components-and-props/composing-components)
122122

123123
Normalmente, le nuove applicazioni React hanno un singolo componente chiamato `App` al livello più alto che racchiude tutti gli altri componenti. Ad ogni modo, quando si va ad integrare React in una applicazione già esistente, è bene partire dal livello più basso e da piccoli componenti come ad esempio `Bottone` procedendo da lì fino alla cima della gerarchia della vista.
124124

@@ -152,7 +152,7 @@ function Commento(props) {
152152
}
153153
```
154154

155-
[**Prova in CodePen**](codepen://components-and-props/extracting-components)
155+
[](codepen://components-and-props/extracting-components)
156156

157157
Esso accetta come props: `autore` (un oggetto), `testo` (una stringa) e `data` (sotto forma di oggetto [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) al fine di renderizzare un commento in un sito di social media, come Facebook.
158158

@@ -231,7 +231,7 @@ function Commento(props) {
231231
}
232232
```
233233

234-
[**Prova in CodePen**](codepen://components-and-props/extracting-components-continued)
234+
[](codepen://components-and-props/extracting-components-continued)
235235

236236
Estrarre componenti può semprare un'attività pesante ma avere una tavolozza di componenti riutilizzabili ripaga molto bene nelle applicazioni più complesse. Una buona regola da tenere a mente è che se una parte della tua UI viene usata diverse volte (`Bottone`, `Pannello`, `Avatar`) o se è abbastanza complessa di per sé (`App`, `StoriaFeed`, `Commento`), allora questi componenti sono buoni candidati ad essere riutilizzabili.
237237

content/docs/conditional-rendering.md

Lines changed: 93 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,243 +1,240 @@
11
---
22
id: conditional-rendering
3-
title: Conditional Rendering
3+
title: Renderizzazione Condizionale
44
permalink: docs/conditional-rendering.html
55
prev: handling-events.html
66
next: lists-and-keys.html
77
redirect_from:
88
- "tips/false-in-jsx.html"
99
---
1010

11-
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
11+
In React, puoi creare componenti distinti che incapsulano il funzionamento di cui hai bisogno. Quindi, puoi renderizzarne solo alcuni, a seconda dello stato della tua applicazione.
1212

13-
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
13+
La renderizzazione condizionale in React funziona nello stesso modo in cui funzionano le condizioni in JavaScript. Puoi perciò usare operatori come [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) o l'[operatore condizionale]([https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Operator_Condizionale)) per creare elementi che rappresentano lo stato corrente cosicchè React possa aggiornare la UI di conseguenza.
1414

15-
Consider these two components:
15+
Considera i due componenti:
1616

1717
```js
18-
function UserGreeting(props) {
19-
return <h1>Welcome back!</h1>;
18+
function BenvenutoUtente(props) {
19+
return <h1>Bentornato/a!</h1>;
2020
}
2121

22-
function GuestGreeting(props) {
23-
return <h1>Please sign up.</h1>;
22+
function BenvenutoOspite(props) {
23+
return <h1>Autenticati, per favore</h1>;
2424
}
2525
```
2626

27-
We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
27+
Creiamo un componente `Benvenuto` che visualizza l'uno o l'altro dei componenti appena visti a seconda del fatto che l'utente sia autenticato o meno:
2828

2929
```javascript{3-7,11,12}
30-
function Greeting(props) {
31-
const isLoggedIn = props.isLoggedIn;
32-
if (isLoggedIn) {
33-
return <UserGreeting />;
30+
function Benvenuto(props) {
31+
const utenteAutenticato = props.utenteAutenticato;
32+
if (utenteAutenticato) {
33+
return <BenvenutoUtente />;
3434
}
35-
return <GuestGreeting />;
35+
return <BenvenutoOspite />;
3636
}
3737
3838
ReactDOM.render(
39-
// Try changing to isLoggedIn={true}:
40-
<Greeting isLoggedIn={false} />,
39+
// Prova a cambiare in utenteAutenticato={true}:
40+
<Benvenuto utenteAutenticato={false} />,
4141
document.getElementById('root')
4242
);
4343
```
4444

45-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
45+
[](codepen://conditional-rendering/1)
4646

47-
This example renders a different greeting depending on the value of `isLoggedIn` prop.
47+
Questo esempio renderizza un messaggio di benvenuto diverso a seconda del valore della prop `utenteAutenticato`.
4848

49-
### Element Variables {#element-variables}
49+
### Variabili Elemento {#element-variables}
5050

51-
You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
51+
Le variabili possono contenere elementi. Ciò ti permette di renderizzare condizionatamente parti del componente mentre il resto dell'output non cambia.
5252

53-
Consider these two new components representing Logout and Login buttons:
53+
Considera questi due nuovi componenti che rappresentano bottoni di Logout e Login:
5454

5555
```js
56-
function LoginButton(props) {
57-
return (
58-
<button onClick={props.onClick}>
59-
Login
60-
</button>
61-
);
56+
function BottoneLogin(props) {
57+
return <button onClick={props.onClick}>Login</button>;
6258
}
6359

64-
function LogoutButton(props) {
65-
return (
66-
<button onClick={props.onClick}>
67-
Logout
68-
</button>
69-
);
60+
function BottoneLogout(props) {
61+
return <button onClick={props.onClick}>Logout</button>;
7062
}
7163
```
7264

73-
In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
65+
Nell'esempio di seguito, creeremo un [componente stateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) chiamato `ControlloLogin`.
7466

75-
It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
67+
Esso renderizzerà `<BottoneLogin />` o `<BottoneLogout />` a seconda del suo stato corrente. Renderizzerà inoltre il componente `<Benvenuto />` dell'esempio precedente:
7668

77-
```javascript{20-25,29,30}
78-
class LoginControl extends React.Component {
69+
```javascript{21-29,33,34}
70+
class ControlloLogin extends React.Component {
7971
constructor(props) {
8072
super(props);
8173
this.handleLoginClick = this.handleLoginClick.bind(this);
8274
this.handleLogoutClick = this.handleLogoutClick.bind(this);
83-
this.state = {isLoggedIn: false};
75+
this.state = {utenteAutenticato: false};
8476
}
8577
8678
handleLoginClick() {
87-
this.setState({isLoggedIn: true});
79+
this.setState({utenteAutenticato: true});
8880
}
8981
9082
handleLogoutClick() {
91-
this.setState({isLoggedIn: false});
83+
this.setState({utenteAutenticato: false});
9284
}
9385
9486
render() {
95-
const isLoggedIn = this.state.isLoggedIn;
96-
let button;
87+
const utenteAutenticato = this.state.utenteAutenticato;
88+
let bottone;
9789
98-
if (isLoggedIn) {
99-
button = <LogoutButton onClick={this.handleLogoutClick} />;
90+
if (utenteAutenticato) {
91+
bottone = (
92+
<BottoneLogout onClick={this.handleLogoutClick} />
93+
);
10094
} else {
101-
button = <LoginButton onClick={this.handleLoginClick} />;
95+
bottone = (
96+
<BottoneLogin onClick={this.handleLoginClick} />
97+
);
10298
}
10399
104100
return (
105101
<div>
106-
<Greeting isLoggedIn={isLoggedIn} />
107-
{button}
102+
<Benvenuto utenteAutenticato={utenteAutenticato} />
103+
{bottone}
108104
</div>
109105
);
110106
}
111107
}
112108
113109
ReactDOM.render(
114-
<LoginControl />,
110+
<ControlloLogin />,
115111
document.getElementById('root')
116112
);
113+
117114
```
118115

119-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
116+
[](codepen://conditional-rendering/2)
120117

121-
While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
118+
Anche se dichiarare una variabile ed usare una condizione con `if` è un buon modo per renderizzare condizionatamente un componente, a volte è preferibile usare una sintassi più corta. Esistono diversi modi per definire condizioni *inline* (ossia nella stessa riga), diamo uno sguardo.
122119

123-
### Inline If with Logical && Operator {#inline-if-with-logical--operator}
120+
### Condizione If Inline con Operatore Logico && {#inline-if-with-logical--operator}
124121

125-
You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
122+
Puoi [incorporare espressioni in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) racchiudendole in parentesi graffe. Lo stesso vale per l'operatore logico JavaScript `&&` che può tornare utile quando vogliamo includere un elemento condizionatamente:
126123

127124
```js{6-10}
128-
function Mailbox(props) {
129-
const unreadMessages = props.unreadMessages;
125+
function CasellaDiPosta(props) {
126+
const messaggiNonLetti = props.messaggiNonLetti;
130127
return (
131128
<div>
132-
<h1>Hello!</h1>
133-
{unreadMessages.length > 0 &&
129+
<h1>Ciao!</h1>
130+
{messaggiNonLetti.length > 0 && (
134131
<h2>
135-
You have {unreadMessages.length} unread messages.
132+
Hai {messaggiNonLetti.length} messaggi non letti.
136133
</h2>
137-
}
134+
)}
138135
</div>
139136
);
140137
}
141138
142-
const messages = ['React', 'Re: React', 'Re:Re: React'];
139+
const messaggi = ['React', 'Re: React', 'Re:Re: React'];
143140
ReactDOM.render(
144-
<Mailbox unreadMessages={messages} />,
141+
<CasellaDiPosta messaggiNonLetti={messaggi} />,
145142
document.getElementById('root')
146143
);
147-
```
148144
149-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
145+
```
146+
[](codepen://conditional-rendering/3)
150147

151-
It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
148+
Funziona perché in JavaScript, `true && espressione` si risolve sempre in `espressione`, mentre `false && espressione` si risolve sempre in `false`.
152149

153-
Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
150+
Per questo, se la condizione è `true`, l'elemento dopo `&&` verrà renderizzato. Se invece è `false`, React lo ignorerà.
154151

155-
### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
152+
### Condizioni If-Else Inline con Operatore Condizionale {#inline-if-else-with-conditional-operator}
156153

157-
Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
154+
Un altro metodo per renderizzare condizionatamente elementi inline è quello di usare l'operatore condizionale JavaScript [`condizione ? true : false`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Operator_Condizionale).
158155

159-
In the example below, we use it to conditionally render a small block of text.
156+
Nell'esempio di seguito, lo useremo per renderizzare condizionatamente un breve blocco di testo.
160157

161158
```javascript{5}
162159
render() {
163-
const isLoggedIn = this.state.isLoggedIn;
160+
const utenteAutenticato = this.state.utenteAutenticato;
164161
return (
165162
<div>
166-
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
163+
L'utente è <b>{utenteAutenticato ? 'attualmente' : 'non'}</b> autenticato.
167164
</div>
168165
);
169166
}
170167
```
171168

172-
It can also be used for larger expressions although it is less obvious what's going on:
169+
Può essere usato anche per espressioni più lunghe anche se diventa meno ovvio capire cosa sta succedendo:
173170

174171
```js{5,7,9}
175172
render() {
176-
const isLoggedIn = this.state.isLoggedIn;
173+
const utenteAutenticato = this.state.utenteAutenticato;
177174
return (
178175
<div>
179-
{isLoggedIn ? (
180-
<LogoutButton onClick={this.handleLogoutClick} />
176+
{utenteAutenticato ? (
177+
<BottoneLogout onClick={this.handleLogoutClick} />
181178
) : (
182-
<LoginButton onClick={this.handleLoginClick} />
179+
<BottoneLogin onClick={this.handleLoginClick} />
183180
)}
184181
</div>
185182
);
186183
}
187184
```
188185

189-
Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
186+
Proprio come in JavaScript, sta a te scegliere lo stile più appropriato a seconda di cosa tu ed il tuo team ritenete più leggibile. Inoltre, ricorda che se le condizioni diventano troppo complesse, potrebbe essere un segnale del fatto che probabilmente è bene [estrarre un componente](/docs/components-and-props.html#extracting-components).
190187

191-
### Preventing Component from Rendering {#preventing-component-from-rendering}
188+
### Prevenire la Renderizzazione di un Componente {#preventing-component-from-rendering}
192189

193-
In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
190+
In alcuni rari casi potresti volere che un componente sia nascosto anche se viene renderizzato da un altro componente. Per ottenere questo risultato devi ritornare `null` al posto del suo output di renderizzazione.
194191

195-
In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
192+
Nell'esempio di seguito, il componente `<MessaggioAvviso />` viene renderizzato a seconda del valore della prop chiamata `attenzione`. Se il valore della prop è `false`, il componente non viene renderizzato:
196193

197-
```javascript{2-4,29}
198-
function WarningBanner(props) {
199-
if (!props.warn) {
194+
```javascript{2-4,28}
195+
function MessaggioAvviso(props) {
196+
if (!props.attenzione) {
200197
return null;
201198
}
202199
203-
return (
204-
<div className="warning">
205-
Warning!
206-
</div>
207-
);
200+
return <div className="warning">Attenzione!</div>;
208201
}
209202
210-
class Page extends React.Component {
203+
class Pagina extends React.Component {
211204
constructor(props) {
212205
super(props);
213-
this.state = {showWarning: true};
214-
this.handleToggleClick = this.handleToggleClick.bind(this);
206+
this.state = {mostraAvviso: true};
207+
this.handleToggleClick = this.handleToggleClick.bind(
208+
this
209+
);
215210
}
216211
217212
handleToggleClick() {
218213
this.setState(state => ({
219-
showWarning: !state.showWarning
214+
mostraAvviso: !state.mostraAvviso,
220215
}));
221216
}
222217
223218
render() {
224219
return (
225220
<div>
226-
<WarningBanner warn={this.state.showWarning} />
221+
<MessaggioAvviso
222+
attenzione={this.state.mostraAvviso}
223+
/>
227224
<button onClick={this.handleToggleClick}>
228-
{this.state.showWarning ? 'Hide' : 'Show'}
225+
{this.state.mostraAvviso ? 'Nascondi' : 'Mostra'}
229226
</button>
230227
</div>
231228
);
232229
}
233230
}
234231
235232
ReactDOM.render(
236-
<Page />,
233+
<Pagina />,
237234
document.getElementById('root')
238235
);
239-
```
240236
241-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
237+
```
238+
[](codepen://conditional-rendering/4)
242239

243-
Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
240+
Ritornando `null` dal metodo `render` di un componente, non modifica il comportamnento dei metodi di lifecycle del componente. Ad esempio `componentDidUpdate` viene ancora chiamato.

content/docs/jsx-in-depth.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ function NumberDescriber(props) {
196196
}
197197
```
198198

199-
You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
199+
You can learn more about [renderizzazione condizionale](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
200200

201201
### String Literals {#string-literals}
202202

content/docs/nav.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
- id: handling-events
2525
title: Gestione degli Eventi
2626
- id: conditional-rendering
27-
title: Conditional Rendering
27+
title: Renderizzazione Condizionale
2828
- id: lists-and-keys
2929
title: Lists and Keys
3030
- id: forms

0 commit comments

Comments
 (0)