Überblick

Die Funktion msg markiert und codiert Zeichenketten für die Übersetzung.

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

Die „encoded string“ sollte an den Hook useMessages oder die Funktion getTranslations übergeben werden, um Übersetzungen abzurufen.

Dekodierung

Um die ursprüngliche Zeichenkette 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!“

Referenz

Parameter

Rückgabewert

Eine encoded string, in der interpolierte variables (falls vorhanden) durch ihre Werte ersetzt werden.

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 gewährleistet schnelle Ladezeiten für alle locales, jedoch kann dabei nur Inhalt übersetzt werden, der zur Build-Zeit bekannt ist.

Sobald sie generiert wurden, werden Übersetzungen entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build-Output Ihrer App — entsprechend Ihrer Konfiguration. Von dort wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, fällt sie auf den ursprünglichen Inhalt als Standardwert zurück.

Befolgen Sie die Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion msg Inhalte bei Bedarf. Das ist hilfreich, um schnell zu sehen, wie Ihre App in verschiedenen Sprachen aussieht. Denken Sie daran, Ihrer 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 bei Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit bei Bedarf übersetzt, d. h. mithilfe von tx oder <Tx>.

Beispiel

Grundlegende Nutzung

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 Benutzers übersetzt.

Variablen verwenden

Sie können variables 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 sich um eine Variable handelt.

Verwendung des ICU Message Formats

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

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

const encodedString = msg('Im Warenkorb {count, plural, =0 {befinden sich keine Artikel} =1 {befindet sich ein Artikel} other {befinden sich {count} Artikel}}', { count: 10 });

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

Hinweise

• Die Funktion msg markiert Zeichenketten für die Übersetzung.
• Übersetzungen von Zeichenketten mit msg erfolgen vor der Laufzeit, während des Build-Prozesses (außer in der Entwicklung).

Nächste Schritte

• Siehe useMessages zum Übersetzen von Strings.