Config

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

PropTypeDefault
locale?
string
-

Beschreibung

TypBeschreibung
localeDas 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.

src/index.js
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.

loadTranslations.js
export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};

Übersetzungen von Ihrem eigenen CDN laden

loadTranslations.js
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

Wie ist dieser Leitfaden?