Überblick

Die Funktion msg kennzeichnet und kodiert Zeichenketten für die Übersetzung.

const encodedString = msg('Hallo, Welt!');

Die codierte Zeichenfolge sollte an den useMessages-Hook oder die Funktion getTranslations übergeben werden, um Übersetzungen abzurufen.

Dekodieren

Um die ursprüngliche Zeichenfolge wiederherzustellen, musst du sie mit decodeMsg dekodieren

import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('Hallo, Welt!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // „Hallo, Welt!“

Referenzen

Parameter

Rückgabewert

Eine codierte Zeichenfolge, wobei interpolierte Variablen (falls vorhanden) durch ihre Werte ersetzt werden.

Verhalten

Produktion

Während des CD-Prozesses wird sämtlicher Inhalt innerhalb einer msg‑Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies gewährleistet schnelle Ladezeiten für alle Locales, kann jedoch nur Inhalte übersetzen, die zum Build‑Zeitpunkt bekannt sind.

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

Stellen Sie sicher, dass Sie die Bereitstellungsanleitung hier befolgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion msg Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, wie deine App in verschiedenen Sprachen wirkt. Denke daran, deiner Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

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

Beispiel

Grundlegende Verwendung

Sie können msg verwenden, um Strings für die Übersetzung zu markieren.

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

const encodedString = msg('Hallo, Welt!');

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

Hinweis: "Hello, world!" wird in die bevorzugte Sprache des/der Nutzer:in übersetzt.

Variablen verwenden

Sie können Variablen an Wörterbuch-Übersetzungen übergeben.

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

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

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

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

Hinweis: "Alice" wird nicht in die bevorzugte Sprache des Nutzers übersetzt, da es eine Variable ist.

Verwendung des ICU-Nachrichtenformats

gt-react unterstützt das ICU-Nachrichtenformat, mit dem Sie auch Variablen formatieren können.

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

const encodedString = 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(encodedString)}
    </p>
  );
}

Hinweise

• Die Funktion msg markiert Zeichenketten zur Übersetzung.
• Übersetzungen von mit msg markierten Zeichenketten erfolgen vor der Laufzeit, während des Build-Prozesses (außer in der Entwicklungsumgebung).

Nächste Schritte

• Siehe useMessages zum Übersetzen von Strings.