OptionsDeTraductionDuDictionnaire

Vue d'ensemble

Le type DictionaryTranslationOptions est utilisé pour passer des variables aux entrées du dictionnaire et spécifier leur comportement de rendu. Il est utilisé avec useDict() pour passer des variables aux entrées du dictionnaire.

Traduction au moment de la construction : Les traductions useDict() se produisent au moment de la construction ; cependant, les variables ne sont jamais traduites. Au lieu de cela, elles sont insérées dans la traduction avec un formatage. Assurez-vous de suivre le guide de déploiement ici.

Référence

Paramètres

Prop	Type	Default
`variables??`	`Record<string, any>`	`undefined`
`variablesOptions??`	`Record<string, Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions>`	`undefined`

Description

Prop	Description
`variables`	Un objet où les clés identifient où chaque valeur est mappée dans l'entrée du dictionnaire.
`variablesOptions`	Un objet où les clés identifient la variable et les valeurs définissent le comportement des variables. Voir `Intl.NumberFormatOptions` et `Intl.DateTimeFormatOptions` pour plus d'informations.

Exemples

Passage de variables

Pour passer une variable à l'entrée du dictionnaire, nous devons faire deux choses : (1) ajouter une variable à l'entrée et (2) référencer ladite variable dans l'appel de d().

Tout d'abord, nous ajoutons une variable à l'entrée du dictionnaire avec la syntaxe suivante : {username}. username est le nom de la variable.

dictionary.ts

const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};
 
export default dictionary;

Ensuite, nous référencons la variable :

Component.tsx

import { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};

Ajout d'options de variable

Les options de variable vous permettent de personnaliser la façon dont une variable est rendue. Elles utilisent la même syntaxe que l'objet variables.

dictionary.ts

const dictionary = {
  account: {
    balance: 'Votre solde de compte : {account-balance}!',
  },
};
 
export default dictionary;

Ensuite, nous référencons la variable :

Component.tsx

import { useDict } from 'gt-react';
 
const Component = () => {
  const d = useDict();
  return <div>
    { d(
      'account.balance',
      {
        variables: { "account-balance" : 1000000 },
        variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
      }
    ) }
  </div>;
};

Notes

L'objet variables passe des valeurs à une entrée de dictionnaire.
L'objet variablesOptions définit le comportement des variables.

Prochaines étapes

Voir dictionnaires pour plus d'informations sur les dictionnaires et les pratiques courantes.
Voir useDict() pour plus d'informations sur l'interface des dictionnaires.
Voir Intl.NumberFormatOptions et Intl.DateTimeFormatOptions pour plus d'informations sur les options de formatage.

OptionsDeTraductionDuDictionnaire

Sur cette page