Interpolación de variables

Es bastante común crear strings que contienen variables.

Nomenclatura de variables

Use nombres sencillos en formato camelCase. No utilice guiones ni guiones bajos.

JS/JSX

Un ejemplo sencillo

MyComponent.messages.js:

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  helloWorld: {
    id: 'appName.component.id',
    defaultMessage: 'Hello {someVar}.',
  },
});

Luego, querrá interpolar el valor:

import { useTranslator } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useTranslator();
    return (
        <div>
            {translator(messages.helloWorld, { someVar: "world" })
        </div>
    );
};

Fase de salida:

Hola, mundo

Un ejemplo más realista

import { defineMessages } from '@jutro/locale';

export default defineMessages({
  premiumDue: {
    id: 'appName.component.id',
    defaultMessage: 'Your premium of {someAmount} is due on {someDate}.',
  },
});

A continuación, querrá interpolar los valores con el formato correcto. Esta es una forma de hacerlo:

import { formatDate, formatCurrency } from '@jutro/components';
import { useTranslator, useIntl } from '@jutro/locale';
import messages from './MyComponent.messages';
...

export default () => {
    const translator = useTranslator();
    const intl = useIntl();
    return (
        <div>
            {translator(messages.premiumDue, {
                someAmount: formatCurrency(intl, {
                    amount: 4324.34,
                    currency: 'usd',
                }),
                someDate: formatDate(intl, {
                    value: '2020-03-04',
                    displayFormat: 'long',
                }),
            })}
        </div>
    );
};

Las variables que contienen elementos como fechas, horas y números deben tener el formato según la configuración regional del usuario. (La elección del idioma del usuario no es necesariamente la misma que su configuración regional. Si bien es poco probable que un usuario elija esto, la arquitectura lo admite).

La salida generada a partir del código anterior se muestra a continuación, con el idioma y la configuración regional establecidos en en-US:

Su prima de $4324,34 vence el 4 de marzo de 2020.

Pasaje de argumentos a propiedades traducibles

Para pasar argumentos a una propiedad que tiene el tipo intlMessageShape, use el campo args en el objeto. El componente lo traducirá mediante el gancho useTranslator.

Supongamos el componente Link. El texto del enlace en sí es traducible, pero quizás también desee interpolar un argumento en el texto del enlace. A continuación, le explicamos cómo hacerlo:

overdueAmount: {
    id: 'myapp.mycomponent.paymentOverdue',
    defaultMessage: 'A payment of {someAmount} is overdue!',
    description: 'A really good description',
},

Puede pasar un valor para someAmount como este:

...
import messages from './MyComponent.messages';
...
export default () => {
    return (
        <Link to="/make-a-payment"
            children={{
                ...messages.overdueAmount,
                args: {
                    someAmount: formatCurrency(intl, {amount: 4223.34, currency: 'usd'}),
                },
            }},
        />
    );
};

Salida para el idioma y la configuración regional establecida en en-US. Aparecerá como un enlace:

¡Un pago de $4223,34 está atrasado!

Limitaciones actuales

Hasta el momento, solo puede invalidar componentProps. Así, no es posible interpolar variables en strings que no formen parte de componentProps de un componente. Por ejemplo, esto se aplica al texto sobre componentes Button y otros.