Mostrare con &&
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 34 di 42.
Spesso non c'è else: vuoi solo che appaia qualcosa quando una condizione è vera. Il && trucco gestisce la visualizzazione o niente:
{unread > 0 && <span>You have {unread} new messages</span>}Come funziona: && restituisce il lato destro quando quello sinistro è vero, e React lo renderizza. Quando quello sinistro è falso, non viene renderizzato nulla. È l’operatore ternario senza la parte : null:
{cond ? <X /> : null} // equivalente a
{cond && <X />}
Sfida
FacileMostra un badge della posta in arrivo solo quando c'è qualcosa da leggere. Il componente definisce unread.
- Usando
&&, renderizza uno<span>conid="badge"e il testo3 new messages(crea il numero a partire dalla variabile!), ma solo quandounreadè maggiore di 0.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React4Props
Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props7Condizioni e liste
Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX