useTranslations
Riferimento API per l’hook useTranslations
Panoramica
useTranslations viene usato per accedere alle traduzioni delle stringhe dal dizionario delle traduzioni.
Deve essere usato all’interno di un componente racchiuso da un <GTProvider>.
const d = useTranslations(); // Ottieni la funzione di traduzione
d('greeting.hello'); // passa l'ID per ottenere la traduzioneuseTranslations utilizza un dizionario per archiviare tutti i contenuti da tradurre.
Questo è diverso dall'uso del componente <T> per la traduzione.
Se intendi usare esclusivamente i componenti <T> per la traduzione, questo documento non è pertinente.
Riferimento
Parametri
Prop
Type
Descrizione
| Prop | Descrizione |
|---|---|
id | Un prefisso opzionale da anteporre a tutte le chiavi di traduzione. Utile per lavorare con valori di dizionari nidificati. |
Restituisce
Una funzione di traduzione d che, dato un ID, restituisce la versione tradotta della voce corrispondente
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode| Nome | Tipo | Descrizione |
|---|---|---|
id | string | L’ID della voce da tradurre |
options? | DictionaryTranslationOptions | Opzioni di traduzione per personalizzare il comportamento di d. |
Esempi
Uso di base del dizionario
Ogni voce del tuo dizionario viene tradotta.
const dictionary = {
greeting: "Ciao, Bob",
};
export default dictionary;Quando vogliamo accedere a queste voci, chiamiamo useTranslations.
Questa restituisce una funzione che accetta la chiave di una traduzione dal dizionario.
Devi passare il dizionario al componente GTProvider.
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"
export default function TranslateGreeting() {
const d = useTranslations();
return (
<GTProvider dictionary={dictionary}>
<p>
{d('greeting')} // [!code highlight]
</p>
</GTProvider>
);
}Utilizzo delle variabili
Per passare dei valori, è necessario (1) assegnare un identificatore e (2) fare riferimento a tale identificatore quando si chiama la funzione d.
In questo esempio, usiamo {} per passare variabili alle traduzioni.
Nel dizionario, assegniamo l’identificatore {userName}.
const dictionary = {
greeting: "Ciao, {userName}!",
};
export default dictionary;import { useTranslations } from 'gt-react';
export default function TranslateGreeting() {
const d = useTranslations();
// Ciao Alice!
const greetingAlice = d('greeting', { userName: "Alice" });
return (
<p>
{greetingAlice} // Ciao, Alice // [!code highlight]
</p>
);
}Uso dei prefissi
Possiamo usare i prefissi per tradurre solo un sottoinsieme del dizionario.
const dictionary = {
prefix1: {
prefix2: {
greeting: "Ciao, Bob",
}
}
};
export default dictionary;Poiché abbiamo aggiunto il valore 'prefix1.prefix2' all’hook useTranslations, tutte le chiavi sono precedute da prefix1.prefix2:
import { useTranslations } from 'gt-react';
export default function UserDetails() {
const d = useTranslations('prefix1.prefix2');
return (
<div>
<p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
</div>
);
}Note
- La funzione
useTranslationsconsente di accedere alle traduzioni del dizionario. - L’hook
useTranslationspuò essere usato solo all’interno di un componente racchiuso da un componente<GTProvider>.
Passi successivi
Come valuti questa guida?