<Tx>

Übersicht

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

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

Die <Tx> Komponente unterstützt die Übersetzung von einfachem Text sowie komplexen JSX-Strukturen. Zusätzlich bietet sie Funktionen zum Umgang mit Variablen, Pluralformen und kontextabhängigen Übersetzungen. <Tx> ist ausschließlich serverseitig.

Referenz

Eigenschaften

Beschreibungen

Verhalten

<Tx> übersetzt JSX zur Laufzeit. Das bedeutet, dass Übersetzungen live durchgeführt werden, sodass Sie Inhalte übersetzen können, die erst zur Laufzeit bekannt sind. Der Nachteil ist, dass es eine Verzögerung gibt, da das Laden einer bedarfsgesteuerten Übersetzung deutlich langsamer ist.

Während des Ladens gibt <Tx> 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 <Tx> den Originalinhalt zurück.

Unser Rat ist, alles, was möglich ist, zur Build-Zeit mit <T>, getGT() oder useGT() zu übersetzen und bedarfsgesteuerte Übersetzungen wie <Tx> und tx() nur dann zu verwenden, wenn es notwendig ist.

Stellen Sie sicher, dass Sie die Bereitstellungsanleitung hier befolgen.

Beispiele

Grundlegende Verwendung

Die <Tx>-Komponente übersetzt ihre Kinder zur Laufzeit.

import { Tx } from 'gt-next';

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

Mit Variablen

Du kannst die <Var>-Komponente verwenden, um Kinder als Variablen zu kennzeichnen. Dadurch kannst du Inhalte markieren, die nicht übersetzt werden sollen.

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

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

Mit Pluralformen

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

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

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  
        </Tx>
    );
}

Einschränkungen

Die <Tx>-Funktion übersetzt nur ihre Nachkommen.

import { Tx } 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 (
        <Tx>
            <div><b>This is valid!</b></div> // wird übersetzt 

            <ValidTranslation> // wird übersetzt 
                Hello, world!
            </ValidTranslation>

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

Hinweise

• Die <Tx>-Komponente ist dafür konzipiert, Inhalte in Ihrer Anwendung zur Laufzeit zu übersetzen.
• Verwenden Sie die <Tx>-Komponente, um einfachen Text oder JSX-Strukturen zu übersetzen, einschließlich Variablen und Pluralisierung.

Nächste Schritte

• Für Übersetzungen zur Buildzeit informiere dich über die <T> Komponente.
• Sieh dir für weiterführende Funktionen die <T> Referenz an.
• Zum Übersetzen von Zeichenketten informiere dich über tx(), getGT() und useGT().
• Schau dir die Verwendung von Variablen-Komponenten und die Verwendung von Verzweigungs-Komponenten für fortgeschrittene Übersetzungsmuster an.