Блог

Главная - Вопросы по программированию - React Intl, как добавить число в сообщении?

React Intl, как добавить число в сообщении?

#reactjs #react-intl

#reactjs #react-intl

Вопрос:

У меня есть en.json файл, как показано ниже:

 {
    "doorClosing": {
      "defaultMessage": "Doors closing",
      "description": "Elevator doors are being closed"
    },
    "floorSelected": {
      "defaultMessage": "Floor selected: {floorSelected}",
      "description": "`The floor ${lift.floorSelected} has been selected`"
    },
    "floorSelectedInvalid": {
      "defaultMessage": "Invalid floor",
      "description": "The selected floor is not valid"
    },
    "idle": {
      "defaultMessage": "",
      "description": ""
    },
    "init": {
      "defaultMessage": "Initialisation",
      "description": "The system is being initialized"
    },
    "liftMoving": {
      "defaultMessage": "Elevator moving",
      "description": "Elevator is being moved to the floor selected"
    }
}

Затем позже в коде я использую let dashboardMsg = intl.formatMessage({id:msg}); , где msg является одним из ключей, содержащихся в файле json.
О ключе floorSelected , когда я его использую, он ${lift.floorSelected} не преобразуется числом, содержащимся в этой переменной.
Что не так? Есть ли другой способ или я должен сделать это вручную?

Ответ №1:

То, что вы хотите, называется форматированным аргументом. Это часть синтаксиса сообщений ICU, который вы можете увидеть здесь для получения дополнительной информации.

 "floorSelected": {
  "id": "floorSelected",
  "defaultMessage": "Floor selected: {floorSelected}",
  "description": "The floor {floorSelected} has been selected"
},
...

В вашем коде

 const message = intl.formatMessage(messages.floorSelected, {
  floorSelected: lift.floorSelected
});

Вы также можете указать тип числа для аргумента, чтобы настроить форматирование числа. Вот пример:

 Number: {num} {num, number, ::currency/USD} {num, number, ::compact-long}

Когда вы вызываете этот метод

 intl.formatMessage(messages.numberExample, {
  num: 4200
})

Оно будет переведено в это

 Number: 4200 $4,200.00 4.2 thousand

Живая демонстрация

Редактировать 64122522/react-intl-как-добавить-число-в-сообщении

Комментарии:

1. Спасибо всем за вашу помощь

2. ваше решение кажется правильным, но теперь я получаю исключение: [React Intl Ошибка FORMAT_ERROR] Сообщение об ошибке форматирования: «idle», используя id в качестве запасного варианта. Locale: fr MessageId: idle Сообщение по умолчанию: не определено Описание: не определено

3. Я пытаюсь следовать инструкциям там: https://formatjs.io/docs/getting-started/message-distribution

4. При компиляции моего json-файла это решение работает нормально

Ответ №2:

Вы можете передавать переменные через values prop:

 "floorSelected": {
  "id": "selected.floor",
  "defaultMessage": "Floor selected: {floorSelected}",
}

//...

let dashboardMsg = intl.formatMessage({id:msg, values: {floorSelected: 5})

Не уверен, что это сработает для описания.

Ответ №3:

FormatMessage принимает дескриптор сообщения и необязательные значения объекта в качестве аргументов.

 formatMessage(messageDescriptor, values);

Для вашего случая

 formatMessage({ id: msg }, { floorSelected: 3 })

Если вы убедитесь, что добавили id свойство ко всем своим дескрипторам сообщений, вам не нужно будет создавать объект с ним на лету каждый раз, когда вы хотите отобразить текст.