Übersicht

Die <T>-Komponente ist die zentrale Übersetzungsmethode in gt-next.

<T>
    Heute bin ich
    {" zum Laden gegangen"}
    <p>
        um <b>einige</b> <i>Lebensmittel</i> zu kaufen.
    </p>
</T>

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

Referenzen

Props

Beschreibungen

Rückgabewert

React.JSX.Element|undefined, das je nach bereitgestellter Konfiguration die gerenderte Übersetzung oder Standardwert-Inhalt enthält.

Verhalten

Produktion

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

Sobald sie generiert wurden, werden Übersetzungen entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build-Output Ihrer App, entsprechend Ihrer Konfiguration. 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.

Stellen Sie sicher, dass Sie die Bereitstellungsanleitung hier befolgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion <T> Inhalte on demand. Das ist hilfreich, um zu prototypisieren, wie Ihre App in verschiedenen Sprachen aussehen wird. 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 lässt sich jedoch über Render-Einstellungen anpassen. Wenn ein Fehler auftritt, gibt <T> den ursprünglichen Inhalt zurück.

In der Entwicklung kommt es bei der On-Demand-Übersetzung zu einer Verzögerung. Diese Verzögerung tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden ausdrücklich on demand übersetzt, d. h. durch Verwendung von <Tx> oder tx.

Beispiele

Grundlegende Verwendung

Das <T> übersetzt seine children.

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Hallo, Welt!
        </T>
    );
}

Mit Variablen

Sie können die Komponente <Var> verwenden, um children als Variablen zu markieren. So können Sie Inhalte kennzeichnen, die nicht übersetzt werden sollen. In der Regel umschließen <Var>-Komponenten dynamische Inhalte.

import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            Hallo, <Var>{user.name}</Var>!
        </T>
    );
}

Mit Pluralformen

Die <T>-Komponente unterstützt auch die Pluralbildung mithilfe der <Plural>-Komponente.

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

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                singular={<>Sie haben einen Artikel.</>} 
                plural={<>Sie haben Artikel.</>}
            />
        </T>
    );
}

Einschränkungen

Die <T>-Komponente übersetzt keine dynamischen Inhalte.

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* führt zu einem Error */}
        </T>
    );
}

Die Funktion <T> übersetzt ihre untergeordneten Elemente.

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>Das ist gültig!</b></div> {/* wird übersetzt */}

            
            <ValidTranslation>
                Hallo, Welt!  {/* wird übersetzt */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* wird nicht übersetzt */}
        </T>
    );
}

Hinweise

• Die <T>-Komponente ist dafür konzipiert, Inhalte in Ihrer Anwendung zu übersetzen. Sie ist die wichtigste Methode zur Lokalisierung in gt-next.
• Verwenden Sie die <T>-Komponente, um Klartext oder JSX-Strukturen zu übersetzen, einschließlich variables und Pluralbildung.
• Wenn Sie die <T>-Komponente clientseitig verwenden, stellen Sie sicher, dass sie in einen <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Für On-Demand-Übersetzungen sehen Sie sich die Komponente <Tx> an.
• Für weiterführende Funktionen siehe die <T> Referenz.
• Zum Übersetzen von Strings sehen Sie sich tx, getGT und useGT an.