DictionaryTranslationOptions
Referencia de API para el tipo DictionaryTranslationOptions
Descripción general
El tipo DictionaryTranslationOptions
se utiliza para pasar variables a las entradas del diccionario y especificar su comportamiento de renderizado.
Se usa con useTranslations()
para pasar variables a las entradas del diccionario.
Traducción en tiempo de construcción:
Las traducciones de useTranslations()
ocurren en tiempo de construcción; sin embargo, las variables nunca se traducen.
En su lugar, se insertan en la traducción con formato.
Asegúrate de seguir la guía de despliegue aquí.
Referencia
Parámetros
Prop | Type | Default |
---|---|---|
variables?? | Record<string, any> | undefined |
Descripción
Prop | Descripción |
---|---|
variables | Un objeto donde las claves identifican dónde se mapea cada valor en la entrada del diccionario. |
Ejemplos
Pasando 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 { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>{d('greeting.hello', { username : 'Brian123' })}</div>;
};
Usando formato de mensaje ICU
gt-react
soporta el formato de mensaje ICU, que te permite también formatear tus variables.
const dictionary = {
account: {
balance: 'Your account balance: {dollars, number, ::currency/USD}!',
},
};
export default dictionary;
A continuación, referenciamos la variable:
import { useTranslations } from 'gt-react';
const Component = () => {
const d = useTranslations();
return <div>
{ d(
'account.balance',
{
"dollars" : 1000000,
}
) }
</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 diccionarios para obtener más información sobre diccionarios y prácticas comunes.
- Consulta
useTranslations()
para obtener más información sobre la interfaz de diccionarios. - Consulta
formato de mensaje ICU
para obtener más información sobre las opciones de formato.
¿Qué te parece esta guía?