Übersicht

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

<Tx>
    Heute bin ich
    {" zum Laden"}
    <p>
        gegangen, um <b>einzukaufen</b> <i>Lebensmittel</i>.
    </p>
</Tx> 

Die <Tx>-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, Pluralformen und kontextspezifischen Übersetzungen. <Tx> ist ausschließlich serverseitig.

Referenzen

Props

Beschreibungen

Verhalten

<Tx> übersetzt JSX zur Laufzeit. Das bedeutet, dass Übersetzungen live erfolgen, sodass Sie Inhalte übersetzen können, die erst zur Laufzeit feststehen. Der Nachteil ist eine Verzögerung, da das Laden einer On-Demand-Übersetzung deutlich länger dauert.

Während des Ladens gibt <Tx> undefined zurück, es sei denn, die Sprachen sind ähnlich (en-US vs. en-GB); dieses Verhalten kann jedoch über Render-Einstellungen angepasst werden. Wenn ein Error auftritt, gibt <Tx> den ursprünglichen Inhalt zurück.

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

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

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 <Var>-Komponente verwenden, um children als Variablen zu markieren. Damit können Sie Inhalte kennzeichnen, 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 Pluralen

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

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>Du hast einen Artikel.</>}  
                plural={<>Du hast Artikel.</>}  
            />  
        </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 Komponente <Tx> ist dafür ausgelegt, Inhalte in Ihrer Anwendung zur Laufzeit zu übersetzen.
• Verwenden Sie die Komponente <Tx>, um Klartext oder JSX-Strukturen zu übersetzen – einschließlich Variablen und Pluralbildung.

Nächste Schritte

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