Zurück

gt-react@10.13.0

Ernest McCarter avatarErnest McCarter
gt-reactmacrotagged-templatedeveloper-experiencei18n

Überblick

Im Rahmen unserer fortlaufenden Experimente, uns vom React-Kontext zu lösen, unterstützt gt-react jetzt die Verwendung von t als getaggtes Template-Literal:

import { t } from "gt-react/browser";

const greeting = t`Hello, ${name}!`;

Dies ist eine alternative Syntax zum bestehenden t()-Funktionsaufruf. Anstatt Platzhalter im ICU-Stil zu schreiben und ein Optionsobjekt zu übergeben, schreiben Sie ein normales JavaScript-Template-Literal, und die Variableninterpolation wird automatisch gehandhabt.

Vorher/Nachher

// Vorher — ICU-Platzhalter + Optionsobjekt
t("Hello, {name}! You have {count} items.", { name, count })

// Nachher — getaggtes Template-Literal
t`Hello, ${name}! You have ${count} items.`

Die Schreibweise als getaggtes Template-Literal macht es überflüssig, Platzhalter zu benennen oder Variablenreferenzen zu duplizieren. Sie schreiben Ihre Zeichenfolge so, wie Sie auch jedes JavaScript-Template-Literal schreiben würden.

Kein React-Kontext erforderlich

Wie die in gt-react@10.12.0 eingeführte Funktion t() ist auch die Form als getaggtes Template-Literal nicht von einem React-Kontext abhängig. Sie funktioniert überall im Browsercode:

  • Event-Handler: onClick={() => alert(t`Saved!`)}
  • Hilfsfunktionen: function formatError(code) { return t`Error: ${code}` }
  • Konstanten und Konfiguration: const LABELS = { save: t`Save`, cancel: t`Cancel` }
  • Auch vollständig außerhalb von React-Komponenten

Globale Registrierung

Wenn Sie t nicht in jeder Datei importieren möchten, können Sie es global registrieren:

// Im Entry Point Ihrer App (z. B. layout.tsx)
import "gt-react/macros";

Dadurch wird globalThis.t gesetzt, sodass das getaggte Template-Literal überall ohne expliziten Import verfügbar ist.

Beispiel

import { t } from "gt-react/browser";

export function Greeting({ name }) {
  return <p>{t`Hello, ${name}!`}</p>;
}

export function SaveButton() {
  return (
    <button onClick={() => alert(t`Changes saved!`)}>
      {t`Save`}
    </button>
  );
}

Oder mit globaler Registrierung:

// Kein Import nötig — t ist auf globalThis
const LABELS = {
  save: t`Save`,
  cancel: t`Cancel`,
  delete: t`Delete`,
};