<T>

Überblick

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

<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>

Die <T> Komponente unterstützt die Übersetzung von einfachem Text sowie komplexen JSX-Strukturen. Zusätzlich bietet sie Funktionen für die Behandlung von Variablen, Pluralformen und kontextspezifischen Übersetzungen.

Referenz

Eigenschaften

Beschreibungen

Rückgabewert

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

Verhalten

Produktion

Während des CD-Prozesses werden alle Kinder innerhalb eines <T> vor der Bereitstellung Ihrer Anwendung übersetzt. Dies gewährleistet schnelle Ladezeiten für alle Sprachversionen, aber es können nur Inhalte übersetzt werden, die zur Build-Zeit bekannt sind.

Nach der Generierung werden die Übersetzungen entweder (1) im CDN oder (2) im Build-Output Ihrer App gespeichert, je nach Ihrer Konfiguration. Von dort aus wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn eine Übersetzung nicht gefunden wird, wird auf den Originalinhalt zurückgegriffen.

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung übersetzt die <T>-Funktion Inhalte bei Bedarf. 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 gibt <T> undefined zurück, es sei denn, die Sprachen sind ähnlich (en-US vs en-GB), obwohl dieses Verhalten mit Rendereinstellungen angepasst werden kann. Tritt ein Fehler auf, gibt <T> den Originalinhalt zurück.

Sie werden während der bedarfsgesteuerten Übersetzung in der Entwicklung eine Verzögerung bemerken. Diese Verzögerung tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit bei Bedarf übersetzt, d. h. durch die Verwendung von <Tx> oder tx().

Beispiele

Grundlegende Verwendung

Das <T> übersetzt seine Kinder.

import { T } from 'gt-next';

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

Mit Variablen

Sie können die <Var>-Komponente verwenden, um Kinder als Variablen zu markieren. Dies ermöglicht es Ihnen, Inhalte zu markieren, 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>
            Hello, <Var>{user.name}</Var>!
        </T>
    );
}

Mit Pluralen

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

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

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                singular={<>You have an item.</>} 
                plural={<>You have items.</>} 
            />
        </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} {/* will create an error */}
        </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>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> {/* will be translated */}

            
            <ValidTranslation>
                Hello, world!  {/* will be translated */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* will not be translated */}
        </T>
    );
}

Hinweise

• Die <T> Komponente ist dafür konzipiert, 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 einen <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Für Übersetzungen auf Abruf schauen Sie sich die <Tx> Komponente an.
• Für weiterführende Funktionen siehe die <T> Referenz.
• Zum Übersetzen von Zeichenketten informieren Sie sich über tx(), getGT() und useGT().
• Schauen Sie sich die Verwendung von Variablenkomponenten und die Verwendung von Verzweigungskomponenten für fortgeschrittene Übersetzungsmuster an.