Überblick

Die <T>-Komponente ist die zentrale Methode für Übersetzungen in gt-react.

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

Die Komponente <T> unterstützt die Übersetzung von einfachem Text ebenso wie von komplexen JSX-Strukturen. Außerdem bietet sie Funktionen für den Umgang mit Variablen, Pluralformen und kontextspezifischen Übersetzungen.

Referenz

Props

Beschreibungen

Rückgabewert

React.JSX.Element|undefined, der je nach bereitgestellter Konfiguration entweder die gerenderte Übersetzung oder den Standardwert enthält.

Verhalten

Produktion

Während des CD-Prozesses werden alle children innerhalb eines <T> vor der Bereitstellung Ihrer Anwendung übersetzt. Dies 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 aus wird der übersetzte Inhalt an Ihre Benutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird als Standardwert auf den ursprünglichen Inhalt zurückgegriffen.

Achten Sie darauf, der Bereitstellungsanleitung hier zu folgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion <T> Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, wie deine App in verschiedenen Sprachen aussehen wird. Denke daran, deiner 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. Tritt ein Error auf, gibt <T> den ursprünglichen Inhalt zurück.

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

Beispiele

Grundlegende Verwendung

Die <T>-Komponente kann einfache Zeichenketten 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 Variablen

Die <T>-Komponente kann Variablen für dynamische Inhalte in Ü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

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

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>Du hast einen Artikel.</>}  
                plural={<>Du hast 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} // wird einen Fehler erzeugen // [!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>No translation</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 Komponente <T> ist zum Übersetzen von Inhalten in Ihrer Anwendung vorgesehen. Sie ist die primäre Methode zur Lokalisierung in gt-react.
• Verwenden Sie die Komponente <T>, um Klartext oder JSX-Strukturen zu übersetzen, einschließlich Variablen und Pluralbildung.
• Stellen Sie sicher, dass die Komponente <T> in einen <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Informieren Sie sich über erweiterte Funktionen wie On-Demand-Übersetzung, Variablen, Kontext und den Umgang mit Pluralen; siehe die Dokumentation zu <T> Design Patterns.
• Für die Übersetzung von Strings: siehe useGT.