Zum Hauptinhalt springen

intlMessageShape

Die Jutro-Plattform hat den benutzerdefinierten Typ intlMessageShape.

Dies entspricht im Wesentlichen der Definition:

intlMessageShape = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.shape(intlMessageObject)
  ]
)

Das heißt, es werden entweder Werte vom Typ string oder vom Typ intlMessageObject akzeptiert.

intlMessageObject ist definiert als:

{
  id?: string;
  defaultMessage?: string;
  args?: Record<string, string>
}

Viele unserer integrierten Komponenten ermöglichen das Festlegen von Eigenschaften, die als UI-Text gerendert werden. Beispielsweise der Text, der auf einer Komponente Button angezeigt werden kann.

Alle diese Eigenschaften haben den Typ intlMessageShape. Daher können Sie Werte mithilfe von unformatierten Zeichenfolgen oder intlMessageObject-Objekten zuweisen.

Hinweis: Dies gilt auch für die Eigenschaften to und href in einer Reihe von Komponenten, z. B Link. Das heißt, die Links selbst sind übersetzbar. Eine solche Funktionalität ist erforderlich, wenn mit sprachspezifischen Ressourcen verknüpft wird.

Wenn Sie jedoch rohe Zeichenfolgen verwenden, um diese Eigenschaften festzulegen, sind diese Zeichenfolgen von Benutzeroberflächen nicht übersetzbar. Damit eine UI-Zeichenfolge übersetzbar ist, muss sie vom Typ intlMessageObject sein.

Wir empfehlen dringend, den Typ intlMessageObject zu verwenden. Auch wenn Sie vielleicht nicht vorhaben, Ihre Anwendung jetzt zu übersetzen, ist dies durch die Verwendung des Typs intlMessageObject auch später noch möglich.

Stellen Sie dementsprechend bei der Erstellung von eigenen benutzerdefinierten Komponenten sicher, dass Sie den Typ intlMessageShape verwenden. Dies ermöglicht es den Benutzern Ihrer Komponente, UI-Zeichenfolgen zu erstellen, die übersetzbar sind

Beispiel JS / JSX​

Zur Definition von UI-Zeichenfolgen zur Verwendung in einer JSX-Komponente:

  1. Erstellen Sie eine Datei MyComponent.messages.js, wie:

    import { defineMessages } from '@jutro/locale';
    export default defineMessages({
      loggedInAs: {
        id: 'jutro-app.pages.AuthPage.LoggedInAs',
        defaultMessage: 'Logged in as: {name}',
        description: 'Message to display the currently logged in user'
        },
        notLoggedIn: {
          id: 'jutro-app.pages.AuthPage.NotLoggedIn.',
          defaultMessage: 'Not logged in.',
          description: 'Message to tell the user they are not logged in'
        }
    })

  2. Importieren und verwenden Sie in Ihrer JSX-Komponente diese Meldungen

Kennungen​

Doppelte IDs​

Der Wert der Eigenschaft id kann innerhalb derselben Datei dupliziert werden. Es wird jedoch der Wert defaultMessage extrahiert, der mit der endgültigen Deklaration von id verbunden ist.

Stellen Sie sicher, dass die Werte von id in allen Dateien eindeutig sind. Wenn sich einer von ihnen wiederholt, erhalten Sie einen Fehler bei der Erstellung.

Weitere Lektüre​

in der Dokumentation Internationalisierung & Lokalisierung finden Sie eine ausführliche Erläuterung zur Extrahierung und anschließenden Übersetzung dieser Zeichenfolgen.

On this page