-
Notifications
You must be signed in to change notification settings - Fork 84
Translation of the page "Conditional rendering" #110
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
4571483
wip: conditional-rendering
deblasis 6af8cc9
Default codepen link description
deblasis b996b3c
Merge remote-tracking branch 'origin/master' into conditional-rendering
deblasis 0474ee9
Fixes "undefined" in codepen links
deblasis 9af579a
conditional-rendering: done
deblasis 5461388
bugfix: missing bits :)
deblasis d984b33
prettier fixes
deblasis 4abb7b3
Highlighting offsets 🐛🔫
deblasis 3f9d55f
Update content/docs/conditional-rendering.md
LucaBlackDragon File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,243 +1,240 @@ | ||
--- | ||
id: conditional-rendering | ||
title: Conditional Rendering | ||
title: Renderizzazione Condizionale | ||
permalink: docs/conditional-rendering.html | ||
prev: handling-events.html | ||
next: lists-and-keys.html | ||
redirect_from: | ||
- "tips/false-in-jsx.html" | ||
--- | ||
|
||
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. | ||
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. | ||
|
||
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. | ||
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. | ||
|
||
Consider these two components: | ||
Considera i due componenti: | ||
|
||
```js | ||
function UserGreeting(props) { | ||
return <h1>Welcome back!</h1>; | ||
function BenvenutoUtente(props) { | ||
return <h1>Bentornato/a!</h1>; | ||
} | ||
|
||
function GuestGreeting(props) { | ||
return <h1>Please sign up.</h1>; | ||
function BenvenutoOspite(props) { | ||
return <h1>Autenticati, per favore</h1>; | ||
} | ||
``` | ||
|
||
We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: | ||
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: | ||
|
||
```javascript{3-7,11,12} | ||
function Greeting(props) { | ||
const isLoggedIn = props.isLoggedIn; | ||
if (isLoggedIn) { | ||
return <UserGreeting />; | ||
function Benvenuto(props) { | ||
const utenteAutenticato = props.utenteAutenticato; | ||
if (utenteAutenticato) { | ||
return <BenvenutoUtente />; | ||
} | ||
return <GuestGreeting />; | ||
return <BenvenutoOspite />; | ||
} | ||
|
||
ReactDOM.render( | ||
// Try changing to isLoggedIn={true}: | ||
<Greeting isLoggedIn={false} />, | ||
// Prova a cambiare in utenteAutenticato={true}: | ||
<Benvenuto utenteAutenticato={false} />, | ||
document.getElementById('root') | ||
); | ||
``` | ||
|
||
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) | ||
[](codepen://conditional-rendering/1) | ||
|
||
This example renders a different greeting depending on the value of `isLoggedIn` prop. | ||
Questo esempio renderizza un messaggio di benvenuto diverso a seconda del valore della prop `utenteAutenticato`. | ||
|
||
### Element Variables {#element-variables} | ||
### Variabili Elemento {#element-variables} | ||
|
||
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. | ||
Le variabili possono contenere elementi. Ciò ti permette di renderizzare condizionatamente parti del componente mentre il resto dell'output non cambia. | ||
|
||
Consider these two new components representing Logout and Login buttons: | ||
Considera questi due nuovi componenti che rappresentano bottoni di Logout e Login: | ||
|
||
```js | ||
function LoginButton(props) { | ||
return ( | ||
<button onClick={props.onClick}> | ||
Login | ||
</button> | ||
); | ||
function BottoneLogin(props) { | ||
return <button onClick={props.onClick}>Login</button>; | ||
} | ||
|
||
function LogoutButton(props) { | ||
return ( | ||
<button onClick={props.onClick}> | ||
Logout | ||
</button> | ||
); | ||
function BottoneLogout(props) { | ||
return <button onClick={props.onClick}>Logout</button>; | ||
} | ||
``` | ||
|
||
In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. | ||
Nell'esempio di seguito, creeremo un [componente stateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) chiamato `ControlloLogin`. | ||
|
||
It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example: | ||
Esso renderizzerà `<BottoneLogin />` o `<BottoneLogout />` a seconda del suo stato corrente. Renderizzerà inoltre il componente `<Benvenuto />` dell'esempio precedente: | ||
|
||
```javascript{20-25,29,30} | ||
class LoginControl extends React.Component { | ||
```javascript{21-29,33,34} | ||
class ControlloLogin extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.handleLoginClick = this.handleLoginClick.bind(this); | ||
this.handleLogoutClick = this.handleLogoutClick.bind(this); | ||
this.state = {isLoggedIn: false}; | ||
this.state = {utenteAutenticato: false}; | ||
} | ||
|
||
handleLoginClick() { | ||
this.setState({isLoggedIn: true}); | ||
this.setState({utenteAutenticato: true}); | ||
} | ||
|
||
handleLogoutClick() { | ||
this.setState({isLoggedIn: false}); | ||
this.setState({utenteAutenticato: false}); | ||
} | ||
|
||
render() { | ||
const isLoggedIn = this.state.isLoggedIn; | ||
let button; | ||
const utenteAutenticato = this.state.utenteAutenticato; | ||
let bottone; | ||
|
||
if (isLoggedIn) { | ||
button = <LogoutButton onClick={this.handleLogoutClick} />; | ||
if (utenteAutenticato) { | ||
bottone = ( | ||
<BottoneLogout onClick={this.handleLogoutClick} /> | ||
); | ||
} else { | ||
button = <LoginButton onClick={this.handleLoginClick} />; | ||
bottone = ( | ||
<BottoneLogin onClick={this.handleLoginClick} /> | ||
); | ||
} | ||
|
||
return ( | ||
<div> | ||
<Greeting isLoggedIn={isLoggedIn} /> | ||
{button} | ||
<Benvenuto utenteAutenticato={utenteAutenticato} /> | ||
{bottone} | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ReactDOM.render( | ||
<LoginControl />, | ||
<ControlloLogin />, | ||
document.getElementById('root') | ||
); | ||
|
||
``` | ||
|
||
[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) | ||
[](codepen://conditional-rendering/2) | ||
|
||
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. | ||
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. | ||
|
||
### Inline If with Logical && Operator {#inline-if-with-logical--operator} | ||
### Condizione If Inline con Operatore Logico && {#inline-if-with-logical--operator} | ||
|
||
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: | ||
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: | ||
|
||
```js{6-10} | ||
function Mailbox(props) { | ||
const unreadMessages = props.unreadMessages; | ||
function CasellaDiPosta(props) { | ||
const messaggiNonLetti = props.messaggiNonLetti; | ||
return ( | ||
<div> | ||
<h1>Hello!</h1> | ||
{unreadMessages.length > 0 && | ||
<h1>Ciao!</h1> | ||
{messaggiNonLetti.length > 0 && ( | ||
<h2> | ||
You have {unreadMessages.length} unread messages. | ||
Hai {messaggiNonLetti.length} messaggi non letti. | ||
</h2> | ||
} | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
const messages = ['React', 'Re: React', 'Re:Re: React']; | ||
const messaggi = ['React', 'Re: React', 'Re:Re: React']; | ||
ReactDOM.render( | ||
<Mailbox unreadMessages={messages} />, | ||
<CasellaDiPosta messaggiNonLetti={messaggi} />, | ||
document.getElementById('root') | ||
); | ||
``` | ||
|
||
[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) | ||
``` | ||
[](codepen://conditional-rendering/3) | ||
|
||
It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. | ||
Funziona perché in JavaScript, `true && espressione` si risolve sempre in `espressione`, mentre `false && espressione` si risolve sempre in `false`. | ||
|
||
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. | ||
Per questo, se la condizione è `true`, l'elemento dopo `&&` verrà renderizzato. Se invece è `false`, React lo ignorerà. | ||
|
||
### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} | ||
### Condizioni If-Else Inline con Operatore Condizionale {#inline-if-else-with-conditional-operator} | ||
|
||
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). | ||
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). | ||
|
||
In the example below, we use it to conditionally render a small block of text. | ||
Nell'esempio di seguito, lo useremo per renderizzare condizionatamente un breve blocco di testo. | ||
|
||
```javascript{5} | ||
render() { | ||
const isLoggedIn = this.state.isLoggedIn; | ||
const utenteAutenticato = this.state.utenteAutenticato; | ||
return ( | ||
<div> | ||
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. | ||
L'utente è <b>{utenteAutenticato ? 'attualmente' : 'non'}</b> autenticato. | ||
</div> | ||
); | ||
} | ||
``` | ||
|
||
It can also be used for larger expressions although it is less obvious what's going on: | ||
Può essere usato anche per espressioni più lunghe anche se diventa meno ovvio capire cosa sta succedendo: | ||
|
||
```js{5,7,9} | ||
render() { | ||
const isLoggedIn = this.state.isLoggedIn; | ||
const utenteAutenticato = this.state.utenteAutenticato; | ||
return ( | ||
<div> | ||
{isLoggedIn ? ( | ||
<LogoutButton onClick={this.handleLogoutClick} /> | ||
{utenteAutenticato ? ( | ||
<BottoneLogout onClick={this.handleLogoutClick} /> | ||
) : ( | ||
<LoginButton onClick={this.handleLoginClick} /> | ||
<BottoneLogin onClick={this.handleLoginClick} /> | ||
)} | ||
</div> | ||
); | ||
} | ||
``` | ||
|
||
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). | ||
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). | ||
|
||
### Preventing Component from Rendering {#preventing-component-from-rendering} | ||
### Prevenire la Renderizzazione di un Componente {#preventing-component-from-rendering} | ||
|
||
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. | ||
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. | ||
|
||
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: | ||
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: | ||
|
||
```javascript{2-4,29} | ||
function WarningBanner(props) { | ||
if (!props.warn) { | ||
```javascript{2-4,28} | ||
function MessaggioAvviso(props) { | ||
if (!props.attenzione) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<div className="warning"> | ||
Warning! | ||
</div> | ||
); | ||
return <div className="warning">Attenzione!</div>; | ||
} | ||
|
||
class Page extends React.Component { | ||
class Pagina extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = {showWarning: true}; | ||
this.handleToggleClick = this.handleToggleClick.bind(this); | ||
this.state = {mostraAvviso: true}; | ||
this.handleToggleClick = this.handleToggleClick.bind( | ||
this | ||
); | ||
} | ||
|
||
handleToggleClick() { | ||
this.setState(state => ({ | ||
showWarning: !state.showWarning | ||
mostraAvviso: !state.mostraAvviso, | ||
})); | ||
} | ||
|
||
render() { | ||
return ( | ||
<div> | ||
<WarningBanner warn={this.state.showWarning} /> | ||
<MessaggioAvviso | ||
attenzione={this.state.mostraAvviso} | ||
/> | ||
<button onClick={this.handleToggleClick}> | ||
{this.state.showWarning ? 'Hide' : 'Show'} | ||
{this.state.mostraAvviso ? 'Nascondi' : 'Mostra'} | ||
</button> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ReactDOM.render( | ||
<Page />, | ||
<Pagina />, | ||
document.getElementById('root') | ||
); | ||
``` | ||
|
||
[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) | ||
``` | ||
[](codepen://conditional-rendering/4) | ||
|
||
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. | ||
Ritornando `null` dal metodo `render` di un componente, non modifica il comportamnento dei metodi di lifecycle del componente. Ad esempio `componentDidUpdate` viene ancora chiamato. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.