Zum Hauptinhalt springen

Nachrichtendeklaration

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Obwohl Sie Nachrichten nur mit ids deklarieren können, empfehlen wir dringend, defaultMessages direkt an der Verwendungsstelle zu deklarieren, und zwar aus folgenden Gründen:

  1. Mit ihrem Kontext platzierte Nachrichten werden selbstverwaltet: Wenn ihre Verwendung geändert oder entfernt wird, gilt das auch für die Nachrichten.

  2. Nachrichten sind stark kontextabhängig. Wir haben viele Fälle gesehen, in denen Entwickler beim Verfassen von Nachrichten von bestimmten grammatikalischen Strukturen ausgehen. Schaltflächen/Call-To-Actions und Beschriftungen werden zudem unterschiedlich übersetzt.

  3. Die Textformatierung hängt ebenfalls von der Nachricht selbst ab. Aspekte wie Kürzung, Großschreibung... beeinflussen die Nachrichten entscheidend.

  4. Bessere Integration in Toolchains. Die meisten Toolchains können dateiübergreifende Referenzen nicht überprüfen, um Syntax/Verwendung zu validieren.

Grundsätzlich nutzen formatjs-Nachrichten die ICU-Syntax mit einigen Erweiterungen, die auch in anderen Nachrichtenformaten wie Fluent üblich sind. Dieser Abschnitt konzentriert sich auf die tatsächlich unterstützten Methoden zum Aufruf der formatjs-APIs für die Nachrichtenextraktion.

Verwendung der imperativen API intl.formatMessage​

// Method must be exactly `intl.formatMessage`
intl.formatMessage(
  {
    description: 'A message', // Description should be a string literal
    defaultMessage: 'My name is {name}', // Message should be a string literal
  },
  {
    name: userName,
  } // Values should be an object literal, but not necessarily every value inside
)

Verwendung der React-API <FormattedMessage/>​

import {FormattedMessage} from 'react-intl'
;<FormattedMessage
  description="A message" // Description should be a string literal
  defaultMessage="My name is {name}" // Message should be a string literal
  values={
    {
      name: userName,
    } // Values should be an object literal, but not necessarily every value inside
  }
/>

Verwendung der Vue-API & Template-Methoden wie $formatMessage​

<template>
  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p>
</template>

Vorab-Deklaration mit defineMessage für spätere Verwendung (weniger empfohlen)​

import {defineMessage} from 'react-intl'
const message = defineMessage({
  description: 'A message', // Description should be a string literal
  defaultMessage: 'My name is {name}', // Message should be a string literal
})

intl.formatMessage(message, {name: 'John'}) // My name is John

<FormattedMessage
  {...message}
  values={{
    name: 'John',
  }}
/> // My name is John
Vorsicht

Wir nutzen AST zur Nachrichtenextraktion aus dem Codebase. Stellen Sie daher sicher, dass Sie entweder intl.formatMessage() aufrufen, unsere React-Komponenten nutzen, Vue-Methoden verwenden oder --additionalFunctionNames/--additionalComponentNames in unserer CLI korrekt konfigurieren.

Vorsicht

Sie können Nachrichten mit defineMessage deklarieren, ohne sie sofort zu formatieren – unser Extrahierer wird sie trotzdem erfassen. Allerdings kann unsere enforce-placeholders-Linterregel sie dann nicht analysieren.