## Einführung Die `Trans`-Komponente ist eines der leistungsstärksten Features in react-i18next. Während die `t()`-Funktion für einfache Strings gut funktioniert, ermöglicht `Trans` das Einbetten von React-Komponenten und HTML-Elementen direkt in deine Übersetzungen. ## Warum die Trans-Komponente verwenden? Die `t()`-Funktion hat Einschränkungen bei: 1. **Fett- oder Kursivtext** innerhalb von Übersetzungen 2. **Links**, die React Router oder benutzerdefinierte Komponenten benötigen 3. **Komplexe HTML-Strukturen** mit korrekter Semantik 4. **React-Komponenten** eingebettet in Text Die Trans-Komponente löst all diese Probleme elegant. ## Grundlegende Trans-Nutzung ### Einfache HTML-Elemente ```json // de.json { "welcome": "Willkommen bei unserer App!" } ``` ```jsx import { Trans } from 'react-i18next'; function Welcome() { return ( }} /> ); } // Ausgabe: Willkommen bei unserer App! ``` ### Mehrere Elemente ```json { "description": "Das ist wichtig und dringend." } ``` ```jsx , italic: }} /> ``` ## Links behandeln ### React Router Links ```json { "navigation": "Gehe zu Startseite oder Über uns" } ``` ```jsx import { Link } from 'react-router-dom'; , aboutLink: }} /> ``` ## Trans mit Variablen kombinieren ```json { "greeting": "Hallo {{name}}, willkommen zurück!" } ``` ```jsx }} /> // Ausgabe: Hallo Max, willkommen zurück! ``` ## Verschachtelte Komponenten ```json { "info": "Für Hilfe kontaktiere Support oder schau in die FAQ" } ``` ```jsx , bold: , faq: }} /> ``` ### Selbstschließende Tags ```json { "break": "Zeile eins
Zeile zwei" } ``` ```jsx }} /> ``` ## Best Practices ### 1. Beschreibende Tag-Namen verwenden ```json // Gut { "cta": "Klicke Jetzt starten zum Beginnen" } // Vermeiden { "cta": "Klicke <0>Jetzt starten zum Beginnen" } ``` ### 2. Übersetzungen lesbar halten ```json // Gut - Kurze, klare Tags { "info": "Lies den Guide für mehr Infos" } // Vermeiden - Zu viele verschachtelte Elemente { "info": "Guide" } ``` ## Häufige Probleme und Lösungen ### Problem 1: Komponenten werden nicht gerendert **Problem:** Tags erscheinen als Text statt als Komponenten. **Lösung:** Stelle sicher, dass Komponentennamen exakt übereinstimmen: ```json { "text": "Hallo" } // Großes B ``` ```jsx components={{ Bold: }} // Muss übereinstimmen ``` ### Problem 2: Fehlende schließende Tags **Problem:** Übersetzung bricht mit nicht geschlossenen Tags ab. **Lösung:** Verwende immer selbstschließende oder korrekt geschlossene Tags: ```json // Selbstschließend { "text": "Zeile
Umbruch" } // Korrekt geschlossen { "text": "Hallo" } ``` ## Fazit Die Trans-Komponente ist essentiell für reichhaltige, internationalisierte React-Anwendungen. Beim Übersetzen von JSON-Dateien mit Trans-Komponenten-Markup stelle sicher, dass dein Übersetzungstool die HTML-ähnlichen Tags bewahrt. [shipglobal.dev](https://shipglobal.dev) erkennt und bewahrt diese Muster automatisch bei der Übersetzung. ## Verwandte Ressourcen - [React i18next Placeholder Guide](/blog/react-i18next-placeholder) - [Vue i18n in JavaScript](/blog/vue-i18n-javascript) - [Android i18n JSON Guide](/blog/android-i18n-json-guide)