React-intl пользовательских форматеров - PullRequest
Новая
       12

React-intl пользовательских форматеров

0 голосов
/ 18 октября 2018

Есть ли способ передать пользовательские форматеры для React-intl?Я вижу, что <IntlProvider> имеет formats реквизит, но, глядя на документы для FormatJS , похоже, что он позволяет только расширять существующие форматеры (например, number, date).Мой текущий вариант использования - это список имен, и я хочу, чтобы он был разделен запятой и последний элемент был соединен с соединением (например, Steve, Joe, Sandra, Judith and Jerry).В идеале я бы просто передал список (['Steve', 'Joe', 'Sandra', 'Judith', 'Jerry']), а средство форматирования использовало бы соответствующую форму соединения для языка.Это в настоящее время поддерживается?

1 Ответ

0 голосов
/ 22 ноября 2018

Я думаю, вы могли бы добиться этого с помощью встроенного select formatter следующим образом: 

const names = ['Steve', 'Joe', 'Sandra', 'Judith', 'Jerry'];

intl.formatMessage({id: 'layout'}, {
  names: names.map((name, index) => intl.formatMessage(
    {id: 'name'}, {
      name: name,
      position: index === names.length - 1 ?
        'last' : (index === 0 ? 'first' : 'inner')
    }
  )).join('')
});

И в ваших переводах JSON-файл: 

{
  "layout": "Here are the names: {names}",
  "name": "{position, select, first {} last {\u00a0and } other {, }}{name}"
}

Thisпозволит вам изменить разделитель относительно позиции (учитывая, что некоторые языки читаются справа налево).join('') просто объединяет все имена с «разделителем» для построения строки перечисления.

Примечание. Я использовал символ Юникод \u00a0 для пробела, потому что обычный пробел игнорировался, если помещался первым в интерполированной строке.

...