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 abbinato a un valore di output in base alle chiavi fornite.

Riferimento

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 relativo al ramo specificato o, in alternativa, il contenuto di fallback.

Genera

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

Esempi

Utilizzo di base

<Branch> deve produrre un output diverso per ciascun possibile valore della prop branch.

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

import { Branch } from 'gt-react';

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-react';

export default function HairColor({ user }) {
  return (
    <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> // [!code highlight]
    </Branch>
  );
}

Tradurre <Branch>

Per tradurre il contenuto, avvolgilo semplicemente in un componente <T>.

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

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>Ha i capelli scuri.</p>}
        brown={<p>Ha i capelli castani.</p>}
        blonde={<p>Ha i capelli chiari.</p>}
      >
        <p>Colore dei capelli sconosciuto.</p> 
      </Branch>
    </T> 
  );
}

Aggiungere variabili

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

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Ha i capelli scuri.</p>}
        brown={<p>Ha i capelli castani.</p>}
        blonde={<p>Ha i capelli chiari.</p>}
      >
        <p>Colore capelli non gestito: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

Note

• Le chiavi dei branch possono essere qualsiasi stringa che corrisponda alla prop branch. Questa flessibilità facilita 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 passaggi

• Per casi d’uso più avanzati ed esempi, vedi Using Branching Components.