Übersicht

Die Funktion useMessages ist ein Hook, der encoded strings von msg zur Build‑Zeit übersetzt.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

Referenzen

Parameter

Keine

Rückgabewert

Eine Callback-Funktion m, die den bereitgestellten codierten Inhalt aus msg übersetzt.

(encodedContent: string, options?: Record<string, any>) => string

Verhalten

Produktion

Während des CD-Prozesses (Continuous Delivery/Deployment) wird sämtlicher Inhalt innerhalb einer msg-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies sorgt für schnelle Ladezeiten für alle locales, kann jedoch nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Nach der Generierung werden Übersetzungen je nach Konfiguration entweder (1) im CDN (Content Delivery/Distribution Network) gespeichert oder (2) im Build-Output Ihrer App abgelegt. Von dort wird der übersetzte Inhalt an Ihre Benutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Befolgen Sie die Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion m Inhalte bei Bedarf. Das ist hilfreich, um zu prototypen, wie deine App in verschiedenen Sprachen aussehen wird. Denke daran, deiner Umgebung einen Dev-API-Schlüssel hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei bedarfsbasierter Übersetzung in der Entwicklung kann es zu einer Verzögerung kommen. Dies tritt in Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit bei Bedarf übersetzt, also mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können useMessages verwenden, um encoded strings aus msg zu übersetzen.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hallo, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Hinweis: „Alice“ wird in die bevorzugte Sprache des Nutzers übersetzt.

Verwendung von variables

Sie können variables in encoded strings überschreiben.

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hallo, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Hinweis: Dadurch wird „Hello, Bob!“ angezeigt – die Variable wird zur Laufzeit beim Rendern überschrieben.

Verwendung des ICU Message Format

gt-react unterstützt das ICU Message Format, mit dem Sie auch Ihre variables formatieren können.

import { msg, useMessages } from 'gt-react';

const encodedMessage = msg('Im Warenkorb {count, plural, =0 {sind keine Artikel} =1 {ist ein Artikel} other {sind {count} Artikel}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Hinweise

• Die Funktion useMessages ist ein Hook, der von msg stammende encoded strings übersetzt.
• Übersetzungen mit useMessages erfolgen nicht zur Laufzeit, sondern bereits während des Build-Prozesses (außer in der Entwicklung).

Nächste Schritte

• Siehe getMessages für asynchrone Übersetzungen von encoded strings zur Build‑Zeit.
• Siehe msg zum Encodieren von Strings für die Übersetzung.
• Für Übersetzungen zur Laufzeit siehe tx und <Tx>.