Übersicht

Die <T>-Komponente ist die zentrale Übersetzungskomponente in gt-react.

<T id="example"> // [!code highlight]
    Heute bin ich
    {" zum Laden gegangen"}
    <p>
        um <b>einzukaufen</b> und ein paar <i>Lebensmittel</i> zu besorgen.
    </p>
</T> 

Die <T>-Komponente unterstützt die Übersetzung von einfachem Text ebenso wie von komplexen JSX-Strukturen. Außerdem bietet sie Funktionen zum Umgang mit Variablen, Pluralen und kontextabhängigen Übersetzungen.

Referenzen

Props

Beschreibungen

Rückgabewert

React.JSX.Element|undefined, das die gerenderte Übersetzung oder den Standardwert basierend auf der angegebenen Konfiguration enthält.

Verhalten

Produktion

Während des CD-Prozesses (Continuous Delivery/Deployment) werden alle children innerhalb eines <T> übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet schnelle Ladezeiten für alle locales, kann jedoch nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Nach der Generierung werden Übersetzungen je nach Konfiguration entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build-Output Ihrer App abgelegt. Von dort wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Befolgen Sie die Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die <T>-Funktion Inhalte On-Demand. Das ist hilfreich, um schnell zu sehen, wie Ihre App in verschiedenen Sprachen aussieht. Denken Sie daran, Ihrer Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

Während des Ladens gibt <T> undefined zurück, es sei denn, die Sprachen sind ähnlich (en-US vs en-GB); dieses Verhalten kann jedoch über Render-Einstellungen angepasst werden. Wenn ein Fehler auftritt, gibt <T> den ursprünglichen Inhalt zurück.

In der Entwicklung kann es bei der On-Demand-Übersetzung zu einer Verzögerung kommen. Diese Verzögerung tritt bei Produktions-Builds nicht auf, da dann bereits alles übersetzt ist.

Beispiele

Grundlegende Verwendung

Die <T>-Komponente kann einfache Strings mithilfe einer id und ihrer children übersetzen. Denken Sie daran, dass die <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 variables

Die <T>-Komponente kann variables 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 Pluralformen

Die <T>-Komponente unterstützt außerdem Pluralbildung mithilfe der <Plural>-Komponente.

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Sie haben einen Artikel.</>}  
                plural={<>Sie haben Artikel.</>}  
            />  // [!code highlight]
        </T>
    );
}

Einschränkungen

Die Komponente <T> übersetzt keine dynamischen Inhalte.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // führt zu einem Fehler // [!code highlight]
        </T>
    );
}

Die Funktion <T> übersetzt ihre untergeordneten Elemente.

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>Das 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>
    );
}

Hinweise

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

Nächste Schritte

• Sehen Sie sich fortgeschrittene Funktionen wie On-Demand-Übersetzung, variables, Kontext und den Umgang mit Pluralen an; weitere Informationen finden Sie in der Dokumentation zu <T> Design Patterns.
• Für die Übersetzung von Strings siehe useGT.