RuntimeTranslationOptions

Aperçu

Le type RuntimeTranslationOptions est utilisé pour passer des variables aux traductions en ligne et spécifier leur comportement de rendu. Vous pouvez également ajouter une locale pour spécifier une langue différente pour la traduction. Ceci est utilisé avec la fonction tx().

Traduction à l'exécution : Pour traduire une variable à la demande, incluez-les directement dans la chaîne passée à tx(). Les variables passées à tx() via l'objet options ne sont pas traduites.

Référence

Paramètres

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`
`$locale??`	`string`	`undefined`

Description

Prop	Description
`variables`	Un objet où les clés identifient où chaque valeur est mappée dans la chaîne de caractères.
`$locale`	Inclure optionnellement `$locale` comme variable dans l'objet `variables` pour spécifier une locale pour la traduction. Par défaut, utilisera la locale la plus préférée du navigateur qui est supportée par votre application.

Exemples

Passer des variables

Pour ajouter une variable à la chaîne, nous utilisons la syntaxe {variable-name}, où les accolades entourent le nom de la variable.

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    {tx(`Hello, {username}!`,{ username: 'Brian123' })}
  </div>;
};

Utiliser le format de message ICU

gt-next prend en charge le format de message ICU, qui vous permet également de formater vos variables.

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>
    { tx(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};

Traduire des variables

Pour traduire une variable, incluez-la directement dans la chaîne passée à tx().

Component.tsx

import { tx } from 'gt-next/server';

const Component = ({ hairColor }: { hairColor: string }) => {
  return <div>{tx(
    `Hello, {username}! Your haircolor is ${hairColor}`,
    { username: 'Brian123' }
  )}</div>;
};

Notez que la variable hairColor est traduite, mais username ne l'est pas.

Spécifier une locale

Vous pouvez spécifier une locale à utiliser pour la traduction.

Component.tsx

import { tx } from 'gt-next/server';

const Component = () => {
  return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};

Ceci sera toujours traduit en français.

Notes

RuntimeTranslationOptions est utilisé pour les traductions de chaînes de caractères à l'exécution.
L'objet variables transmet des valeurs au texte.
L'objet variablesOptions définit le comportement des variables.

Prochaines étapes

Voir tx() pour plus d'informations sur les traductions de chaînes en ligne.
Voir ICU message format pour plus d'informations sur les options de formatage.

RuntimeTranslationOptions

Sur cette page