Übersetzung von Zeichenketten

Übersicht

Dieser Leitfaden führt Sie durch die Internationalisierung von Zeichenketten in Ihrer React-App mit dem useGT()-Hook.

Wir behandeln die folgenden Themen:

Wann der useGT()-Hook verwendet werden sollte

Wie der useGT()-Hook verwendet wird

Verwendung von Variablen

Beispiele

Häufige Fallstricke

Wann sollte der `useGT()`-Hook verwendet werden

Der useGT()-Hook ist ein React-Hook, der verwendet werden kann, um Zeichenketten zu übersetzen.

In den meisten Fällen kannst du die <T>-Komponente verwenden. Wenn jedoch JSX nicht geeignet ist, kann der useGT()-Hook eingesetzt werden.

Einige Fälle, in denen der useGT()-Hook besser geeignet sein könnte, sind:

In Eigenschaften, die ausschließlich Zeichenketten erwarten, wie zum Beispiel die Attribute placeholder oder title.
Wenn die Zeichenkette Teil eines größeren Objekts ist, zum Beispiel:

const user = {
  title: 'Mr.',
  name: 'John',
  description: 'John is a software engineer at General Translation',
}

Hier sollte nur die Eigenschaft description übersetzt werden.

Wann immer möglich, solltest du die <T>-Komponente verwenden. Die <T>-Komponente ermöglicht es dir, JSX-Inhalte zu übersetzen, und ist die empfohlene Methode, um Zeichenketten zu übersetzen.

Wie man den `useGT()` Hook verwendet

Der useGT() Hook muss innerhalb des <GTProvider> aufgerufen werden.

Um einen String zu übersetzen, übergeben Sie den String einfach direkt an die Funktion, die vom Hook zurückgegeben wird.

const translate = useGT();
translate('Hello, world!');

Im Gegensatz zu herkömmlichen i18n-Bibliotheken erfordert der useGT() Hook nicht, dass Sie einen key an die Funktion übergeben. Stattdessen wird der String direkt an die Funktion übergeben.

Das bedeutet, dass Sie keine Wörterbücher verwenden müssen!

Verwendung von Variablen

Oft müssen Sie Zeichenfolgen übersetzen, die Variablen enthalten.

Zum Beispiel müssen Sie möglicherweise eine Zeichenfolge übersetzen, die Zahlenwerte enthält.

Um Variablen hinzuzufügen, fügen Sie die Variable einfach als Platzhalter mit {variable} in die Zeichenfolge ein und übergeben Sie ein Objekt als zweites Argument an die von dem Hook zurückgegebene Funktion.

const price = 100;
const translate = useGT();
translate('There are {count} items in the cart', { variables: { count: 10 } });

Der Platzhalter {count} wird durch den Wert der Variable count ersetzt.

So können Sie dynamische Werte in Ihren Übersetzungen anzeigen.

Weitere Informationen zur API finden Sie in der API-Referenz.

Beispiele

Übersetzen eines Strings in einer Komponente

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Hello, world!')}</h1>
    </div>
  )
}

export default function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}

Übersetzen eines Strings mit Variablen

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const count = 10;
  return (
    <div>
      <h1>{t('There are {count} items in the cart', { variables: { count } })}</h1>
    </div>
  )
}

export default function MyComponent() {
  const count = 10;
  return (
    <div>
      <h1>There are {count} items in the cart</h1>
    </div>
  )
}

Übersetzen von Teilen eines Objekts

import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const users = [
    {
      name: 'John',
      description: t('John is a software engineer at General Translation'),
    },
    {
      name: 'Jane',
      description: t('Jane is a software engineer at Google'),
    },
  ]
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          <h1>{user.name}</h1>
          <p>{user.description}</p>
        </div>
      ))}
    </div>
  )
}

export default function MyComponent() {
  const users = [
    {
      name: 'John',
      description: 'John is a software engineer at General Translation',
    },
    {
      name: 'Jane',
      description: 'Jane is a software engineer at Google',
    },
  ]
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          <h1>{user.name}</h1>
          <p>{user.description}</p>
        </div>
      ))}
    </div>
  )
}

Übersetzen gemeinsam genutzter Konstanten

src/llms.ts

// Custom function to get LLM data with translations
export function getLLMData(t: (content: string) => string) {
  return [
    {
      name: 'GPT-4.1',
      id: 'gpt-4.1',
      description: t('GPT-4.1 is a large language model developed by OpenAI'),
    },
    {
      name: 'Claude 3.7 Sonnet',
      id: 'claude-3-7-sonnet',
      description: t('Claude 3.7 Sonnet is a large language model developed by Anthropic'),
    },
  ]
}

import { getLLMData } from './llms';
import { useGT } from 'gt-react';

export default function MyComponent() {
  const t = useGT();
  const llms = getLLMData(t);
  return (
    <div>
      {llms.map((llm) => (
        <div key={llm.id}>
          <h1>{llm.name}</h1>
          <p>{llm.description}</p>
        </div>
      ))}
    </div>
  )
}

src/llms.ts

export const llms = [
  {
    name: 'GPT-4.1',
    id: 'gpt-4.1',
    description: 'GPT-4.1 is a large language model developed by OpenAI',
  },
  {
    name: 'Claude 3.7 Sonnet',
    id: 'claude-3-7-sonnet',
    description: 'Claude 3.7 Sonnet is a large language model developed by Anthropic',
  },
]

import { llms } from './llms';

export default function MyComponent() {
  return (
    <div>
      {llms.map((llm) => (
        <div key={llm.id}>
          <h1>{llm.name}</h1>
          <p>{llm.description}</p>
        </div>
      ))}
    </div>
  )
}

In diesem letzten Beispiel haben wir das llms Array in eine Funktion umgewandelt, die die Daten mit Übersetzungen zurückgibt. Wir haben die t Funktion an die Funktion übergeben, die die Daten zurückgibt.

Alternativ könnten Sie das llms Array auch in einen benutzerdefinierten Hook umwandeln. Dies wird jedoch nicht empfohlen, da Sie sehr vorsichtig sein müssen, wie Sie den useGT() Hook verwenden, um nicht gegen die Regeln von React zu verstoßen.

Häufige Fallstricke

Übersetzung von dynamischen Inhalten

Alle Zeichenketten müssen zur Build-Zeit bekannt sein.

Das bedeutet, dass Sie keine dynamischen Inhalte übersetzen können, die zur Laufzeit generiert oder abgerufen werden.

Dies schließt Variablen ein, selbst wenn es sich um Zeichenketten handelt.

export default function MyComponent() {
  const [dynamicContent, setDynamicContent] = useState('Hello, world!');
  const t = useGT();
  return (
    <div>
      <h1>{t(dynamicContent)}</h1> // This will not work
    </div>
  )
}

Das CLI-Tool warnt Sie, wenn Sie versuchen, dynamische Inhalte zu übersetzen

Nächste Schritte

Erfahren Sie mehr über die <T> Komponente.
Sehen Sie die API-Referenz für useGT().

Übersetzung von Zeichenketten

Warum kann ich das `llms` Array nicht direkt importieren?

Warum kann ich keine dynamischen Inhalte übersetzen?

Auf dieser Seite