Überblick

Die Komponente <Tx> übersetzt JSX-Inhalte zur Laufzeit.

<Tx>
    Heute bin ich
    {" in den Laden gegangen"}
    <p>
        um <b>einzukaufen</b> und <i>Lebensmittel</i> zu besorgen.
    </p>
</Tx> 

Die Komponente <Tx> unterstützt sowohl die Übersetzung von reinem Text als auch von komplexen JSX-Strukturen. Außerdem bietet sie Funktionen für den Umgang mit Variablen, Pluralformen und kontextspezifischen Übersetzungen. <Tx> ist ausschließlich serverseitig.

Referenzen

Props

Beschreibungen

Verhalten

<Tx> übersetzt JSX zur Laufzeit. Das bedeutet, Übersetzungen erfolgen live, sodass Sie Inhalte übersetzen können, die erst zur Laufzeit vorliegen. Der Nachteil ist eine Wartezeit, da On-Demand-Übersetzungen beim Laden spürbar langsamer sind.

Während des Ladens gibt <Tx> 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. Tritt ein Error auf, gibt <Tx> den ursprünglichen Inhalt zurück.

Unsere Empfehlung: Übersetzen Sie so viel wie möglich zur Build-Zeit mit <T>, getGT oder useGT und verwenden Sie On-Demand-Übersetzungen wie <Tx> und tx nur bei Bedarf.

Befolgen Sie außerdem die Deploy-Anleitung hier.

Beispiele

Grundlegende Verwendung

Die Komponente <Tx> übersetzt ihre children zur Laufzeit.

import { Tx } from 'gt-next';

export default function Greeting() {
    return (
        <Tx id="greeting">
            Hallo, Welt!
        </Tx> 
    );
}

Mit Variablen

Sie können die Komponente <Var> verwenden, um children als Variablen zu kennzeichnen. So markieren Sie Inhalte, die nicht übersetzt werden sollen.

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

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

Mit Pluralformen

Die Komponente <T> unterstützt auch die Pluralbildung über die Komponente <Plural>.

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>Sie haben ein Element.</>}  
                plural={<>Sie haben Elemente.</>}  
            />  
        </Tx>
    );
}

Einschränkungen

Die Funktion <Tx> übersetzt nur ihre untergeordneten Elemente.

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

            <ValidTranslation> // wird übersetzt 
                Hallo, Welt!
            </ValidTranslation>

            <InvalidTranslation /> // wird nicht übersetzt
        </Tx>
    );
}

Hinweise

• Die <Tx>-Komponente ist dafür ausgelegt, Inhalte in Ihrer Anwendung zur Laufzeit zu übersetzen.
• Verwenden Sie die <Tx>-Komponente, um Klartext oder JSX-Strukturen zu übersetzen, einschließlich variables und Pluralbildung.

Nächste Schritte

• Für Buildtime Translation siehe die <T>-Komponente.
• Für weiterführende Funktionen siehe die <T>-Referenz.
• Zum Übersetzen von Strings siehe tx, getGT und useGT.