<T>

Überblick

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

<T> // [!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 Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Sobald sie generiert wurden, werden Übersetzungen entweder (1) im CDN gespeichert oder (2) im Build-Output Ihrer App gespeichert, je nach 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 On-Demand-Übersetzung in der Entwicklung sehen. Diese Verzögerung tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit auf Abruf übersetzt, d.h. durch die Verwendung von <Tx> oder tx().

Beispiele

Grundlegende Verwendung

Der <T> wird seine Kinder übersetzen.

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

Mit Variablen

Sie können die <Var> Komponente verwenden, um Kinder als Variablen zu markieren. Dies ermöglicht es Ihnen, Inhalte zu kennzeichnen, die nicht übersetzt werden sollen. Normalerweise umschließen <Var> Komponenten dynamische Inhalte.

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

Mit Pluralen

Die <T> Komponente unterstützt auch die Pluralisierung mit der <Plural> Komponente.

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

Einschränkungen

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

import { T } from 'gt-next';
 
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-next';
 
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-next.
• Verwenden Sie die <T> Komponente, um einfachen Text oder JSX-Strukturen zu übersetzen, einschließlich Variablen und Pluralisierung.
• Wenn Sie die <T> Komponente auf der Client-Seite verwenden, stellen Sie sicher, dass sie in einem <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Für bedarfsgesteuerte Übersetzungen schauen Sie sich die <Tx> Komponente an.
• Schauen Sie sich fortgeschrittenere Funktionen an, siehe die <T> Referenz.
• Für die Übersetzung von Zeichenfolgen schauen Sie sich tx(), getGT() und useGT() an.
• Schauen Sie sich die Verwendung von Variablenkomponenten und die Verwendung von Verzweigungskomponenten für fortgeschrittenere Übersetzungsmuster an.