Übersicht

Die Funktion loadTranslations ist der wichtigste Weg, das Ladeverhalten für Übersetzungen anzupassen.

In der Produktion müssen Ihre Übersetzungen so gespeichert werden, dass sie in Ihrer App gerendert werden können. Standardmäßig werden Ihre Übersetzungen im GT-CDN (Content Delivery Network) gespeichert. Sie können eine loadTranslations-Funktion angeben, um Übersetzungen aus einer anderen Quelle zu beziehen, zum Beispiel:

• aus dem Bundle Ihrer App (am häufigsten)
• aus einer Datenbank
• aus einer API
• aus einem anderen CDN (Content Delivery Network)

Wir bieten integrierte Unterstützung für das Laden von Übersetzungen aus lokalen files im Bundle Ihrer App. Folgen Sie dieser Anleitung, um local translations in Ihrer React-App einzurichten.

Referenz

Parameter

Beschreibung

Rückgabewert

Ein Promise<any>, das entweder zu einer Zeichenfolge oder einem JSX-Objekt aufgelöst wird und die Übersetzungen für die angegebene locale enthält.

Setup

Importieren Sie die Funktion loadTranslations und übergeben Sie sie als Prop an die Komponente <GTProvider>.

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 files laden

Bei Verwendung von local translations 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 (Content Delivery Network) 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 ermöglicht es, zu steuern, wie Übersetzungen in deiner App in Production geladen werden.
• Der häufigste Anwendungsfall ist das Hinzufügen von local translations

Nächste Schritte