Renderizzare un frammento di HTML in base a una condizione in JSX

di , in HTML5, React,

Un'operazione molto comune durante la renderizzazione di un componente è quella di mostrare o meno certe informazioni. Ad esempio, se un utente è loggato possiamo mostrare il suo nome e mostrare un link al login in caso contrario. JSX supporta il rendering condizionale sfruttando la normale sintassi JavaScript, facendo quindi uso sia dell'istruzione if che dell'operatore ternario. I prossimi esempi producono lo stesso risultato.

function showUser(props) {
  if (props.isLoggedIn) {
    return <div>{props.name}</div>;
  }
  return <a href="login">Login</a>;
}

function showUser(props) {
  return (
    props.isLoggedIn ? <div>{props.name}</div> : <a href="login">Login</a>
  );
}

Commenti

Visualizza/aggiungi commenti

Renderizzare un frammento di HTML in base a una condizione in JSX (#276)
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi