<Tx>

Überblick

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

<Tx> // [!code highlight]
    Heute ging ich
    {" zum Laden"}
    <p>
        um <b>einzukaufen</b> einige <i>Lebensmittel</i>.
    </p>
</Tx> 

Die <Tx> Komponente unterstützt die Übersetzung von einfachem Text sowie komplexen JSX-Strukturen. Zusätzlich bietet sie Funktionen zur Handhabung von Variablen, Pluralen und kontextspezifischen Übersetzungen. <Tx> ist nur serverseitig.

Referenz

Props

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 Kompromiss besteht darin, dass es eine Verzögerung gibt, während auf eine bedarfsgesteuerte Übersetzung gewartet wird, was erheblich 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. Wenn ein Fehler auftritt, gibt <Tx> den Originalinhalt zurück.

Unser Rat ist, alles, was Sie können, zur Build-Zeit zu übersetzen, indem Sie <T>, getGT() oder useGT() verwenden, und nur bei Bedarf bedarfsgesteuerte Übersetzungen wie <Tx> und tx() zu verwenden.

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Beispiele

Grundlegende Verwendung

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

import { Tx } from 'gt-next';
 
export default function Greeting() {
    return (
        <Tx id="greeting"> // [!code highlight]
            Hallo, Welt!
        </Tx> 
    );
}

Mit Variablen

Sie können die <Var>-Komponente verwenden, um Kinder als Variablen zu markieren. Dies ermöglicht es Ihnen, Inhalte zu kennzeichnen, die nicht übersetzt werden sollen.

import { Tx, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <Tx>
            Hallo, <Var>{user.name}</Var>! // [!code highlight]
        </Tx>
    );
}

Mit Pluralen

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={<>Du hast einen Artikel.</>}  
                plural={<>Du hast Artikel.</>}  
            />  // [!code highlight]
        </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>Keine Übersetzung</b></div>);
 
export default function Example() {
    return (
        <Tx>
            <div><b>Dies ist gültig!</b></div> // wird übersetzt // [!code highlight]
 
            <ValidTranslation> // wird übersetzt // [!code highlight]
                Hallo, Welt! // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // wird nicht übersetzt
        </Tx>
    );
}

Notizen

• 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 Variablen und Pluralisierung.

Nächste Schritte

• Für Übersetzungen zur Buildzeit schauen Sie sich die <T> Komponente an.
• Schauen Sie sich fortgeschrittenere Funktionen an, siehe die <T> Referenz.
• Für die Übersetzung von Zeichenfolgen schauen Sie sich tx(), getGT() und useGT() an.
• Schauen Sie sich die Verwendung von Variablenkomponenten und die Verwendung von Verzweigungskomponenten für fortgeschrittenere Übersetzungsmuster an.