Texto enriquecido

Puede incrustar marcado en cadenas de texto, como:

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

export default defineMessages({
  boldItalics: {
    id: 'appName.component.id.boldAndItalics',
    defaultMessage:
      'This text is <b>bolded</b>, and this text is <i>italicized</i>.',
  },
});

Posteriormente, cuando realmente use el string, debe usar un contexto de traductor y manejar el marcado en el segundo argumento, como:

import { useTranslator } from '@jutro/locale';
const translator = useTranslator();

translator(messages.boldItalics, {
  b: (chunks) => <b>{chunks}</b>,
  i: (chunks) => <i>{chunks}</i>,
});

Output:

This text is bolded, and this text is italicized.

Note: the tags in the source string are arbitrary. They can be mapped to anything in the translator context.

Similarly, given a string like this:

linkedText: {
        id: 'appName.component.id.linkedText',
        defaultMessage: 'View our privacy policy <a>here</a>'
    }

El enlace se puede tratar como:

translator(
    messages.linkedText,
    {a: chunks => <a href="/privacyPolicy">{chunks}</a>}
    )

Tenga en cuenta que en este escenario, toda la cadena de texto es traducible, pero la URL del enlace no lo es. (en caso de que uno tuviera enlaces sensibles al idioma)