<T>

Überblick

Die <T> Komponente ist die Hauptübersetzungsmethode in gt-react.

<T id="example"> // [!code highlight]
    Heute ging ich
    {" zum Laden"}
    <p>
        um <b>einzukaufen</b> einige <i>Lebensmittel</i>.
    </p>
</T> 

Die <T> Komponente unterstützt die Übersetzung von einfachem Text sowie komplexen JSX-Strukturen. Zusätzlich bietet sie Funktionen zur Handhabung von Variablen, Pluralen und kontextspezifischen Übersetzungen.

Referenz

Props

Beschreibungen

Rückgaben

React.JSX.Element|undefined, das die gerenderte Übersetzung oder den Fallback-Inhalt basierend auf der bereitgestellten Konfiguration enthält.

Verhalten

Produktion

Während des CD-Prozesses werden alle Kinder innerhalb eines <T> übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies gewährleistet schnelle Ladezeiten für alle Lokalisierungen, aber es kann nur Inhalt übersetzen, der zur Build-Zeit bekannt ist.

Sobald sie generiert sind, werden Übersetzungen entweder (1) im CDN gespeichert oder (2) im Build-Output Ihrer App gespeichert, gemäß Ihrer Konfiguration. Von dort aus wird der übersetzte Inhalt an Ihre Benutzer ausgeliefert. Wenn eine Übersetzung nicht gefunden wird, wird auf den ursprünglichen Inhalt zurückgegriffen.

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung wird die <T>-Funktion Inhalte auf Abruf übersetzen. Dies ist nützlich, um zu prototypisieren, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, einen Dev-API-Schlüssel zu Ihrer Umgebung hinzuzufügen, um dieses Verhalten zu aktivieren.

Während des Ladens wird <T> undefiniert zurückgeben, es sei denn, die Sprachen sind ähnlich (en-US vs en-GB), obwohl dieses Verhalten mit Rendereinstellungen angepasst werden kann. Wenn ein Fehler auftritt, wird <T> den ursprünglichen Inhalt zurückgeben.

Sie werden eine Verzögerung während der bedarfsgesteuerten Übersetzung in der Entwicklung sehen. Diese Verzögerung wird bei Produktions-Builds nicht auftreten, da alles bereits übersetzt sein wird.

Beispiele

Grundlegende Verwendung

Das <T>-Komponente kann einfache Zeichenfolgen mit einer id und ihren Kindern übersetzen. Denken Sie daran, dass das <T>-Komponente innerhalb eines <GTProvider> verwendet werden muss, um auf die Übersetzungen zuzugreifen.

import { T } from 'gt-react';
 
export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hallo, Welt!
        </T> 
    );
}

Mit Variablen

Das <T>-Komponente kann Variablen für dynamische Inhalte innerhalb von Übersetzungen enthalten.

import { T, Var } from 'gt-react';
 
export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hallo, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Mit Pluralen

Das <T>-Komponente unterstützt auch die Pluralisierung mit dem <Plural>-Komponente.

import { T, Plural } from 'gt-react';
 
export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Sie haben ein Element.</>}  
                plural={<>Sie haben Elemente.</>}  
            />  // [!code highlight]
        </T>
    );
}

Einschränkungen

Das <T>-Komponente übersetzt keine Inhalte, die dynamisch sind.

import { T } from 'gt-react';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // wird einen Fehler erzeugen // [!code highlight]
        </T>
    );
}

Die <T>-Funktion übersetzt ihre Nachkommen.

import { T } from 'gt-react';
 
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
 
const InvalidTranslation = ({ children }) => (<div><b>Keine Übersetzung</b></div>);
 
export default function Example() {
    return (
        <T>
            <div><b>Dies ist gültig!</b></div> // wird übersetzt // [!code highlight]
 
            <ValidTranslation> // wird übersetzt // [!code highlight]
                Hallo, Welt! // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // wird nicht übersetzt
        </T>
    );
}

Notizen

• Die <T> Komponente ist dafür ausgelegt, Inhalte in Ihrer Anwendung zu übersetzen. Sie ist die primäre Methode zur Lokalisierung in gt-react.
• Verwenden Sie die <T> Komponente, um einfachen Text oder JSX-Strukturen zu übersetzen, einschließlich Variablen und Pluralisierung.
• Stellen Sie sicher, dass die <T> Komponente in einem <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Schauen Sie sich fortgeschrittenere Funktionen wie bedarfsgesteuerte Übersetzung, Variablen, Kontext und den Umgang mit Pluralen an. Weitere Informationen finden Sie in der Dokumentation zu <T> Design Patterns.
• Für die Übersetzung von Zeichenfolgen schauen Sie sich useGT() an.
• Sehen Sie sich die Verwendung von Variablenkomponenten und die Verwendung von Verzweigungskomponenten für fortgeschrittenere Übersetzungsmuster an.