Variablen-Interpolation

Es ist durchaus üblich, Zeichenfolgen zu erstellen, die Variablen enthalten.

Variablenbenennung

Verwenden Sie einfache Namen im camelCased-Format. Verwenden Sie keine Bindestriche oder Unterstriche.

JS/JSX

Einfaches Beispiel

MyComponent.messages.js:

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

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

Dann müssen Sie den Wert interpolieren:

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

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

Ausgabe:

Hallo Welt

Ein realistischeres Beispiel

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

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

Dann sollten Sie korrekt formatierte Werte interpolieren. Hier ist eine Möglichkeit, dies zu tun:

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

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

Variablen, die Datumsangaben, Uhrzeiten, Zahlen usw. enthalten, müssen entsprechend dem Gebietsschema des Benutzers formatiert werden. (Die Sprachauswahl des Benutzers entspricht nicht unbedingt seinem Gebietsschema. Es ist zwar unwahrscheinlich, dass ein Benutzer dies wählen würde, aber die Architektur unterstützt es).

Die aus dem obigen Code generierte Ausgabe ist unten dargestellt, wobei sowohl Sprache als auch Gebietsschema auf en-US gesetzt sind:

Your premium of $4324.34 is due on March 4, 2020.

Übergabe von Argumenten an übersetzbare Eigenschaften

Um Argumente an eine Eigenschaft des Typs intlMessageShape zu übergeben, verwenden Sie das Feld args im Objekt. Es wird von der Komponente mit TranslatorContext übersetzt.

Sehen wir uns die Komponente Link an. Der Linktext selbst ist übersetzbar, aber Sie können auch ein Argument im Linktext interpolieren. Und so geht's:

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

Sie können einen Wert für someAmount wie folgt übergeben:

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

Die Ausgabe für Sprache und Gebietsschema ist auf en-US gesetzt. Erscheint als Link:

A payment of $4,223.34 is overdue!

Aktuelle Beschränkungen

Nach derzeitigem Stand können Sie componentProps nur überschreiben. Daher ist es nicht möglich, Variablen in Zeichenfolgen zu interpolieren, die nicht Teil von componentProps der Komponenten sind. Dies gilt z. B. für Text von Button-Komponenten und andere.