<Tx>

Überblick

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 zur Behandlung von Variablen, Pluralformen und kontextspezifischen Übersetzungen. <Tx> ist nur serverseitig verfügbar.

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 übersetzt ihre Kinder zur Laufzeit.

import { Tx } from 'gt-next';
 
export default function Greeting() {
    return (
        <Tx id="greeting">
            Hello, world!
        </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>
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}

Mit Pluralformen

Die <T>-Komponente unterstützt auch 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> // will be translated 
 
            <ValidTranslation> // will be translated 
                Hello, world!
            </ValidTranslation>
 
            <InvalidTranslation /> // will not be translated
        </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.