Renderizzazione Condizionale

Navigazione interna

Puoi dare un'occhiata a questo post, a questa pagina, tornare indietro alla homepage o all'archivio.

Condizioni If-Else Inline con Operatore Condizionale

Un altro metodo per renderizzare condizionatamente elementi inline è quello di usare l’operatore condizionale JavaScript condizione ? true : false.

Nell’esempio di seguito, lo useremo per renderizzare condizionatamente un breve blocco di testo.

render() {
  const utenteAutenticato = this.state.utenteAutenticato;
  return (
    <div>
      L'utente è <b>{utenteAutenticato ? 'attualmente' : 'non'}</b> autenticato.    </div>
  );
}

Può essere usato anche per espressioni più lunghe anche se diventa meno ovvio capire cosa sta succedendo:

render() {
  const utenteAutenticato = this.state.utenteAutenticato;
  return (
    <div>
      {utenteAutenticato ? (        <BottoneLogout onClick={this.handleLogoutClick} />
      ) : (        <BottoneLogin onClick={this.handleLoginClick} />
      )}    </div>
  );
}

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.