Übersicht

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

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

Die <T>-Komponente unterstützt die Übersetzung von Klartext 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ückgabe

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

Verhalten

Produktion

Während des CD-Prozesses werden alle children innerhalb eines <T> vor der Bereitstellung Ihrer Anwendung übersetzt. Dies sorgt für kurze Ladezeiten in allen locales, kann jedoch nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

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

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion <T> Inhalte bei Bedarf. Das ist hilfreich, um zu prototypisieren, wie deine App in verschiedenen Sprachen aussehen wird. Denk daran, deiner Umgebung einen Dev-API-Schlüssel 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 Error auftritt, 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 in Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit on demand übersetzt, d. h. durch die Verwendung von <Tx> oder tx.

Beispiele

Grundlegende Verwendung

Die <T> übersetzt ihre 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 kennzeichnen. So markieren Sie Inhalte, 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 mit 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 Komponente <T> übersetzt keine dynamischen Inhalte.

import { T } from 'gt-next';

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

Die Funktion <T> übersetzt ihre Nachkommen.

import { T } from 'gt-next';

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 */}

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

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

Hinweise

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

Nächste Schritte

• Für On-Demand-Übersetzung sehen Sie sich die Komponente <Tx> an.
• Weitere fortgeschrittene Funktionen finden Sie in der Referenz zu <T>.
• Zum Übersetzen von Strings sehen Sie sich tx, getGT und useGT an.