Rich Text

Sie können Markup in Zeichenfolgen einbetten, z. B:

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>.',
  },
});

Wenn Sie die Zeichenfolge dann tatsächlich verwenden, müssen Sie ein TranslatorContext verwenden und das Markup im zweiten Argument verarbeiten, etwa so:

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

Ausgabe:

Dieser Text ist ****fett__ und dieser Text ist kursiv formatiert.

Hinweis: Die Tags in der Quellzeichenfolge sind beliebig. Sie können einem beliebigen Element im TranslatorContext zugeordnet werden.

Ähnlich verhält es sich mit einer Zeichenfolge wie dieser:

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

Der Link kann wie folgt behandelt werden:

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

Beachten Sie, dass in diesem Szenario die gesamte Zeichenfolge übersetzbar ist – die URL des Links jedoch nicht. (für den Fall, dass man sprachsensitive Links hat)