Il rendering condizionale si riferisce alla modifica del comportamento di un'app in base al suo stato. Ad esempio, puoi cambiare il messaggio di saluto della tua app React in scuro durante la notte. In questo modo si ha un messaggio sul display diverso a seconda dell'ora del giorno.

Il rendering condizionale consente di eseguire il rendering di diversi componenti o elementi di React se viene soddisfatta una condizione. In questo tutorial imparerai i diversi modi in cui puoi utilizzare il rendering condizionale nelle applicazioni React.js.

Modi per implementare il rendering condizionale

Per seguire questi esempi, devi avere una conoscenza di base di come funziona React. Se stai lottando in quel caso, non preoccuparti: abbiamo un utile guida per principianti a React.js.

Utilizzo di dichiarazioni condizionali

Come in JavaScript, puoi utilizzare istruzioni condizionali come if...else per creare elementi quando vengono soddisfatte determinate condizioni.

Ad esempio, puoi visualizzare un elemento specificato nel file

Se bloccare quando una condizione è soddisfatta e visualizzarne una diversa in altro bloccare se la condizione non è soddisfatta.

Si consideri l'esempio seguente in cui viene visualizzato un pulsante di accesso o disconnessione a seconda dello stato di accesso dell'utente.

funzione Dashboard (oggetti di scena) {
 const { isLoggedIn } = props
 se (è loggato){
 Restituzione Disconnettersi
 } altro{
 Restituzione Login
 }
}

Questa funzione esegue il rendering di un pulsante diverso a seconda del isLoggedIn valore passato come prop.

Imparentato: Come utilizzare gli oggetti di scena in ReactJS

In alternativa, puoi utilizzare l'operatore ternario. L'operatore ternario accetta una condizione seguita dal codice da eseguire se la condizione lo è veritiero seguito dal codice da eseguire se la condizione è falso.

Riscrivi la funzione sopra come:

funzione Dashboard (oggetti di scena) {
 const { isLoggedIn } = props
 Restituzione (
 <>
 {è registrato?Disconnettersi:Login)
 )
}

L'operatore ternario rende la funzione più pulita e di facile lettura rispetto alla se altro dichiarazione.

Dichiarazione di variabili elemento

Le variabili elemento sono variabili che possono contenere elementi JSX ed essere visualizzate quando richiesto in un'app React.

È possibile utilizzare le variabili elemento per eseguire il rendering solo di una determinata parte del componente quando l'applicazione soddisfa la condizione specificata.

Ad esempio, se desideri visualizzare solo un pulsante di accesso quando l'utente non ha effettuato l'accesso e un pulsante di disconnessione solo quando ha effettuato l'accesso, puoi utilizzare le variabili elemento.

funzione LoginBtn (props) {
 Restituzione (

 Login

 );
}
funzione LogoutBtn (props) {
 Restituzione (

 Disconnettersi

 );
}
funzione Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (vero)
 }
 const handleLogout = () => {
 setLoggedIn (falso)
 }
 lascia il pulsante;
 se (acceso) {
 pulsante = 
 } altro {
 pulsante = 
 }
 Restituzione (
 <>
 {connesso}
 )
}

Nel codice sopra, prima hai creato i componenti del pulsante Login e Logout, quindi definisci il componente per renderli ciascuno in condizioni diverse.

In questo componente, usa React state hook per tenere traccia di quando l'utente ha effettuato l'accesso.

Imparentato: Padroneggia le tue abilità di reazione imparando questi ganci aggiuntivi

Ora, a seconda dello stato, entrambi rendono il o componente.

Se l'utente non ha effettuato l'accesso, eseguire il rendering di componente altrimenti rendere the componente. Le due funzioni handle cambiano lo stato di accesso quando si fa clic sul rispettivo pulsante.

Utilizzo di operatori logici

Puoi usare la logica && operatore per eseguire il rendering condizionale di un elemento. Qui un elemento viene visualizzato solo se la condizione restituisce true, altrimenti viene ignorato.

Se desideri notificare a un utente il numero di notifiche che ha solo quando ha una o più notifiche, puoi utilizzare quanto segue.

funzione ShowNotifiche (oggetti di scena) {
 const {notifiche} = props
 Restituzione (
 <>
 {notifiche.lunghezza > 0 &&

 Hai {notifications.length} notifiche.


 }
 )
}

Quindi, per eseguire il rendering di un elemento se l'espressione && logica restituisce un valore falso, concatena la logica || operatore.

La seguente funzione mostra il messaggio "Non hai notifiche" se nessuna notifica viene passata come prop.

funzione ShowNotifiche (oggetti di scena) {
 const {notifiche} = props
 Restituzione (
 <>
 {notifiche.lunghezza > 0 &&

 Hai {notifications.length} notifiche.
 || 
Non hai notifiche

 }
 )
}

Impedisci il rendering di un componente

Per nascondere un componente anche se è stato eseguito il rendering da un altro componente, restituire null, invece del suo output.

Considera il seguente componente che esegue il rendering di un pulsante di avviso solo se un messaggio di avviso viene passato come prop.

funzione Avvertimento (oggetti di scena) {
 const {warningMessage} = props
 se (!messaggio di avviso) {
 ritorno nullo
 }
 Restituzione (
 <>
Avvertimento
 )
}

Ora, se passi 'warningMessage' al componente, verrà visualizzato un pulsante di avviso. Tuttavia, se non lo fai, restituirà null e il pulsante non verrà visualizzato.

 // viene visualizzato il pulsante di avviso
 // il pulsante di avviso non viene visualizzato

Esempi di rendering condizionale in applicazioni di reazione nella vita reale

Usa il rendering condizionale per eseguire diverse attività nella tua applicazione. Alcuni di questi includono il rendering dei dati API solo quando sono disponibili e la visualizzazione di un messaggio di errore solo quando si verifica un errore.

Rendering dei dati recuperati da un'API in React

Il recupero dei dati da un'API può richiedere del tempo. Pertanto, in primo luogo, controlla se è disponibile prima di utilizzarlo nella tua applicazione, altrimenti React genererà un errore se non è disponibile.

La funzione seguente mostra come eseguire il rendering condizionale dei dati restituiti da un'API.

funzione Recupero Dati() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? chiave_api=CHIAVE_DEMO";
 // Recupera i dati dall'API utilizzando Axios
 const fetchData = asincrono () => {
 risposta const = attendi axios.get (apiURL)
 // Aggiorna lo stato con i dati
 setData (dati di risposta) 
 }
 Restituzione (
 <>
Foto astronomica del giorno

 {
 dati && 
{data.title}

{data.explanation}

 }
 )
}

Nella funzione sopra, prendi i dati da API Apod della NASA usando Axios. Quando l'API restituisce una risposta, aggiorna lo stato e usa l'operatore logico && per eseguire il rendering dei dati solo quando sono disponibili.

Imparentato: Come consumare le API in React usando Fetch e Axios

Visualizzazione dei messaggi di errore

Nei casi in cui desideri visualizzare un errore solo quando esiste, usa il rendering condizionale.

Ad esempio, se stai creando un modulo e desideri visualizzare un messaggio di errore se un utente ha digitato il formato e-mail errato, aggiorna lo stato con il messaggio di errore e utilizza un'istruzione if per visualizzarlo.

funzione mostraErrore() {
 const [errore, setError] = useState (null)
 Restituzione (
 <>
 {
 se (errore) {
Si è verificato un errore: {errore}

 }
 }
 )
}

Scegliere cosa usare nella tua app React

In questo tutorial, hai appreso i diversi modi in cui è possibile eseguire il rendering condizionale degli elementi JSX.

Tutti i metodi discussi forniscono gli stessi risultati. Scegli cosa usare a seconda del caso d'uso e del livello di leggibilità che desideri ottenere.

7 migliori tutorial gratuiti per imparare a reagire e creare app Web

I corsi gratuiti raramente sono così completi e utili, ma abbiamo trovato diversi corsi React che sono eccellenti e ti faranno iniziare con il piede giusto.

Leggi Avanti

Circa l'autore