Panoramica

Il componente <Branch> consente di aggiungere logica condizionale alle traduzioni.

const status = 'active';
<Branch branch={status}
    active={<p>L'utente è attivo.</p>}
    inactive={<p>L'utente è inattivo.</p>}
/>

Si passa un valore al parametro branch, che viene associato a un valore di output in base alle chiavi fornite.

Riferimenti

Props

La sintassi [key]: string indica chiavi arbitrarie che rappresentano potenziali branch. Ad esempio, branch come active e inactive possono essere aggiunti come parametri.

Restituisce

JSX.Element che contiene il contenuto corrispondente al branch specificato oppure il contenuto di fallback.

Eccezioni generate

Error se la prop branch non è fornita o non è valida.

Esempi

Utilizzo di base

<Branch> deve fornire un output diverso per ogni possibile valore della prop branch.

In questo esempio, il valore user.hairColor viene usato per determinare l’output. Abbiamo definito le prop black, brown e blonde per corrispondere ai possibili valori di user.hairColor.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Ha i capelli scuri.</p>}
      brown="Ha i capelli castani." // (puoi passare una stringa se preferisci)
      blonde={<p>Ha i capelli chiari.</p>}
    />
  );
}

Contenuto di fallback

I children verranno sempre utilizzati come fallback se nessuna prop corrisponde al valore passato a branch.

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>I suoi capelli sono scuri.</p>}
      brown={<p>I suoi capelli sono castani.</p>}
      blonde={<p>I suoi capelli sono biondi.</p>}
    >
      <p>Il colore dei suoi capelli è sconosciuto.</p> // [!code highlight]
    </Branch>
  );
}

Traduzione di <Branch>

Per tradurre il contenuto, ti basta racchiuderlo in un componente <T>.

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Hanno i capelli scuri.</p>}
        brown={<p>Hanno i capelli castani.</p>}
        blonde={<p>Hanno i capelli chiari.</p>}
      >
        <p>Il colore dei capelli è sconosciuto.</p> 
      </Branch>
    </T> 
  );
}

Aggiunta di variabili

Se vuoi visualizzare valori dinamici nel branch, assicurati di racchiuderli nei componenti <Currency>, <DateTime>, <Num> o <Var>.

import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Hanno i capelli scuri.</p>}
        brown={<p>Hanno i capelli di tonalità media.</p>}
        blonde={<p>Hanno i capelli chiari.</p>}
      >
        <p>Colore dei capelli non previsto: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

Note

• Le chiavi per i branch possono essere qualunque stringa che corrisponda alla prop branch. Questa flessibilità semplifica l’adattamento di <Branch> a un’ampia gamma di casi d’uso.
• Combina <Branch> con altri componenti, come <T> per le traduzioni e i componenti variabili per contenuti dinamici, per creare interfacce ricche e localizzate.

Prossimi passi

• Per un uso più avanzato e per esempi, vedi Uso dei Branching Components.