<T>

Übersicht

Die <T>-Komponente ist die Hauptübersetzungsmethode in gt-react.

<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> 

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

Referenz

Eigenschaften

Beschreibungen

Rückgabewert

React.JSX.Element|undefined, das die gerenderte Übersetzung oder einen Fallback-Inhalt basierend auf der bereitgestellten Konfiguration enthält.

Verhalten

Produktion

Während des CD-Prozesses werden alle Kinder innerhalb eines <T> vor der Bereitstellung Ihrer Anwendung übersetzt. Dies gewährleistet schnelle Ladezeiten für alle Sprachversionen, aber es können nur Inhalte übersetzt werden, die zur Build-Zeit bekannt sind.

Nach der Generierung werden die Übersetzungen entweder (1) im CDN oder (2) im Build-Output Ihrer App gespeichert, je nach Ihrer Konfiguration. Von dort aus wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn eine Übersetzung nicht gefunden wird, wird auf den Originalinhalt zurückgegriffen.

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung übersetzt die <T>-Funktion Inhalte bei Bedarf. Dies ist nützlich, um zu prototypisieren, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, einen Dev-API-Schlüssel zu Ihrer Umgebung hinzuzufügen, um dieses Verhalten zu aktivieren.

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

Sie werden während der bedarfsgesteuerten Übersetzung in der Entwicklung eine Verzögerung bemerken. Diese Verzögerung tritt bei Produktions-Builds nicht auf, da dann bereits alles übersetzt ist.

Beispiele

Grundlegende Verwendung

Die <T>-Komponente kann einfache Zeichenfolgen mithilfe einer id und ihrer Kinder übersetzen. Denken Sie daran, dass die <T>-Komponente innerhalb eines <GTProvider> verwendet werden muss, um auf die Übersetzungen zugreifen zu können.

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> 
    );
}

Mit Variablen

Die <T>-Komponente kann Variablen für dynamische Inhalte innerhalb von Übersetzungen einbinden.

import { T, Var } from 'gt-react';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

Mit Pluralformen

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

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  // [!code highlight]
        </T>
    );
}

Einschränkungen

Die <T>-Komponente übersetzt keine Inhalte, die dynamisch sind.

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // will create an error // [!code highlight]
        </T>
    );
}

Die <T>-Funktion übersetzt ihre Nachkommen.

import { T } from 'gt-react';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // will be translated // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // will not be translated
        </T>
    );
}

Hinweise

• Die <T> Komponente ist dafür konzipiert, Inhalte in Ihrer Anwendung zu übersetzen. Sie ist die Hauptmethode für die Lokalisierung in gt-react.
• Verwenden Sie die <T> Komponente, um Klartext oder JSX-Strukturen zu übersetzen, einschließlich Variablen und Pluralisierung.
• Stellen Sie sicher, dass die <T> Komponente in einen <GTProvider> eingebettet ist, um auf den Übersetzungskontext zuzugreifen.

Nächste Schritte

• Informieren Sie sich über fortgeschrittene Funktionen wie bedarfsgesteuerte Übersetzung, Variablen, Kontext und die Handhabung von Pluralformen. Weitere Informationen finden Sie in der Dokumentation zu <T> Design Patterns.
• Für die Übersetzung von Zeichenketten schauen Sie sich useGT() an.
• Sehen Sie sich die Verwendung von Variablenkomponenten und die Verwendung von Verzweigungskomponenten für fortgeschrittene Übersetzungsmuster an.