OpcionesDeTraduccionDeDiccionario
Referencia de API para el tipo OpcionesDeTraduccionDeDiccionario
Descripción general
El tipo DictionaryTranslationOptions
se utiliza para pasar variables a las entradas del diccionario y especificar su comportamiento de renderizado.
Se utiliza con useDict()
y getDict()
para pasar variables a las entradas del diccionario.
Referencia
Parámetros
Prop | Type | Default |
---|---|---|
variablesOptions?? | Record<string, Intl.NumberFormatOptions | Intl.DateTimeFormatOptions> | undefined |
variables?? | Record<string, any> | undefined |
Descripción
Prop | Descripción |
---|---|
variables | Un objeto donde las claves identifican a dónde se asigna cada valor en la entrada del diccionario. |
variablesOptions | Un objeto donde las claves identifican la variable y los valores definen el comportamiento de las variables. Consulta Intl.NumberFormatOptions y Intl.DateTimeFormatOptions para más información. |
Ejemplos
Pasar variables
Para pasar una variable a la entrada del diccionario, necesitamos hacer dos cosas: (1) agregar una variable a la entrada y (2) referenciar dicha variable en la invocación de d()
.
Primero, agregamos una variable a la entrada del diccionario con la siguiente sintaxis: {username}
.
username
es el nombre de la variable.
const dictionary = {
greeting: {
hello: 'Hello, {username}!',
},
};
export default dictionary;
A continuación, referenciamos la variable:
import { useDict } from 'gt-next/client';
const Component = () => {
const d = useDict();
return <div>{d('greeting.hello', { variables: { username : 'Brian123' } })}</div>;
};
Agregar opciones de variables
Las opciones de variables te permiten personalizar cómo se muestra una variable.
Utiliza la misma sintaxis que el objeto variables
.
const dictionary = {
account: {
balance: 'Your account balance: {account-balance}!',
},
};
export default dictionary;
A continuación, referenciamos la variable:
import { useDict } from 'gt-next/client';
const Component = () => {
const d = useDict();
return <div>
{ d(
'account.balance',
{
variables: { "account-balance" : 1000000 },
variableOptions: { "account-balance": { style: 'currency', currency: 'USD' } }
}
) }
</div>;
};
Notas
- El objeto
variables
pasa valores a una entrada del diccionario. - El objeto
variablesOptions
define el comportamiento de las variables.
Próximos pasos
- Consulta dictionaries para obtener más información sobre diccionarios y prácticas comunes.
- Consulta
useDict()
ogetDict()
para obtener más información sobre la interfaz de diccionarios. - Consulta
Intl.NumberFormatOptions
yIntl.DateTimeFormatOptions
para obtener más información sobre las opciones de formato.
¿Qué te parece esta guía?