Einführung#

Die Handhabung dynamischer Inhalte in Übersetzungen ist eine der häufigsten Herausforderungen bei der React-Internationalisierung. React-i18next bietet leistungsstarke Interpolations-Features, mit denen du Variablen einfügen, Werte formatieren und flexible Übersetzungen erstellen kannst.

Grundlegende Platzhalter-Syntax#

React-i18next verwendet standardmäßig doppelte geschweifte Klammern {{variable}} für die Interpolation:

json
// de.json
{
  "greeting": "Hallo, {{name}}!",
  "notification": "Du hast {{count}} neue Nachrichten"
}
jsx
// Component.jsx
import { useTranslation } from 'react-i18next';

function Greeting() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting', { name: 'Max' })}</h1>
      {/* Ausgabe: Hallo, Max! */}

      <p>{t('notification', { count: 5 })}</p>
      {/* Ausgabe: Du hast 5 neue Nachrichten */}
    </div>
  );
}

Variablen-Interpolation#

Mehrere Variablen#

Du kannst mehrere Platzhalter in einer Übersetzung verwenden:

json
{
  "welcome": "Willkommen zurück, {{firstName}} {{lastName}}! Letzte Anmeldung: {{lastLogin}}"
}
jsx
t('welcome', {
  firstName: 'Max',
  lastName: 'Mustermann',
  lastLogin: 'Gestern'
})
// Ausgabe: Willkommen zurück, Max Mustermann! Letzte Anmeldung: Gestern

Werte formatieren#

i18next bietet eingebaute Formatierungsoptionen:

json
{
  "price": "Preis: {{amount, number}}",
  "currency": "Gesamt: {{amount, currency(EUR)}}"
}
jsx
t('price', { amount: 1234.56 })
// Ausgabe: Preis: 1.234,56 (locale-abhängig)

t('currency', { amount: 99.99 })
// Ausgabe: Gesamt: 99,99 €

Pluralisierung mit Platzhaltern#

json
{
  "items": "{{count}} Artikel",
  "items_plural": "{{count}} Artikel",
  "items_zero": "Keine Artikel"
}
jsx
t('items', { count: 0 })  // Keine Artikel
t('items', { count: 1 })  // 1 Artikel
t('items', { count: 5 })  // 5 Artikel

Best Practices#

1. Beschreibende Variablennamen verwenden#

json
// Gut
{
  "greeting": "Hallo, {{userName}}!"
}

// Vermeiden
{
  "greeting": "Hallo, {{0}}!"
}

2. Platzhalter konsistent halten#

StilBeispielHinweis
{{var}}{{name}}i18next Standard
{var}{name}Häufig in anderen Frameworks
%{var}%{name}Ruby-Stil

3. Fehlende Werte elegant behandeln#

jsx
// Standard-Werte in Config setzen
i18n.init({
  interpolation: {
    defaultVariables: {
      appName: 'MeineApp',
      supportEmail: 'support@beispiel.de'
    }
  }
});

Übersetze deine React-JSON-Dateien

Jeder {{Platzhalter}} bleibt heil — Anzahl und Reihenfolge werden geprüft, bevor irgendetwas geschrieben wird.

Konto anlegenab 19 € im Monat

Häufige Probleme und Lösungen#

Problem 1: Platzhalter werden nicht ersetzt#

Problem: {{name}} erscheint in der Ausgabe statt dem Wert.

Lösungen:

  1. Prüfe, ob der Key exakt übereinstimmt (case-sensitive)
  2. Stelle sicher, dass du das Objekt korrekt übergibst: t('key', { name: value })
  3. Prüfe, ob i18next richtig initialisiert ist

Problem 2: XSS-Sicherheitslücke#

Problem: Benutzereingaben werden als HTML gerendert.

Lösung: i18next escaped Werte standardmäßig. Deaktiviere Escaping nie für Benutzereingaben.

Übersetzungen mit Platzhaltern automatisieren#

Beim Übersetzen von Dateien mit Platzhaltern ist es entscheidend, dass die Platzhalter erhalten bleiben. Tools wie shipglobal.dev erkennen und bewahren automatisch:

  • {{variable}} - i18next-Stil
  • {variable} - ICU-Stil
  • %s, %d, %@ - Printf-Stil

Fazit#

Die Beherrschung von Platzhaltern in react-i18next ist essentiell für dynamische, mehrsprachige React-Anwendungen. Bereit, deine React-App zu übersetzen? Probiere shipglobal.dev um deine i18n JSON-Dateien automatisch zu übersetzen.

Verwandte Ressourcen#