loadTranslations()
API-Referenz für die Funktion loadTranslations().
Übersicht
Die Funktion loadTranslations()
ist die primäre Methode, um das Ladeverhalten von Übersetzungen anzupassen.
In der Produktion müssen Ihre Übersetzungen so gespeichert werden, dass sie in Ihrer App angezeigt werden können.
Standardmäßig werden Ihre Übersetzungen im GT CDN gespeichert.
Sie können eine eigene loadTranslations()
-Funktion angeben, um Übersetzungen aus einer anderen Quelle zu laden, zum Beispiel:
- Aus dem Bundle Ihrer App (am häufigsten)
- Aus einer Datenbank
- Über eine API
- Von einem anderen CDN
Wir bieten integrierte Unterstützung für das Laden von Übersetzungen aus lokalen Dateien im Bundle Ihrer App. Folgen Sie dieser Anleitung, um lokale Übersetzungen in Ihrer React-App einzurichten.
Referenz
Parameter
Prop | Type | Default |
---|---|---|
locale? | string | - |
Beschreibung
Typ | Beschreibung |
---|---|
locale | Das Gebietsschema, für das Übersetzungen geladen werden sollen. |
Rückgabewert
Ein Promise<any>
, das entweder zu einem String oder einem JSX-Objekt aufgelöst wird, das die Übersetzungen für das angegebene Gebietsschema enthält.
Einrichtung
Sie müssen die Funktion loadTranslations()
importieren und sie als Prop an die Komponente <GTProvider>
übergeben.
import loadTranslations from './loadTranslations';
createRoot(document.getElementById("root")!).render(
<StrictMode>
<GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
<App />
</GTProvider>
</StrictMode>
);
Beispiele
Übersetzungen aus lokalen Dateien laden
Wenn Sie lokale Übersetzungen verwenden, werden mit dem Befehl gtx-cli translate
die Übersetzungen im Verzeichnis ./src/_gt
gespeichert.
export default async function loadTranslations(locale) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
};
Übersetzungen von Ihrem eigenen CDN laden
export default async function loadTranslations(locale) {
try {
const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
const data = await translations.json();
return data;
} catch (e) {
console.error(e);
return {};
}
};
Hinweise
loadTranslations()
gibt Ihnen die Möglichkeit, anzupassen, wie Übersetzungen in Ihrer App in der Produktion geladen werden.- Der häufigste Anwendungsfall ist das Hinzufügen von lokalen Übersetzungen
Nächste Schritte
- Erfahren Sie, warum Sie möglicherweise lokale Übersetzungen verwenden möchten
Wie ist dieser Leitfaden?