Question

有没有办法为React-intl传递自定义格式器？我看到<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <div> <select class="my-select"> <option value="1">Option1</option> <option value="2">Option2</option> </select> </div> <div> <select class="my-select" data-show="true"> <option value="3">Option3</option> <option value="4">Option4</option> </select> </div>有一个<IntlProvider>道具，但是在查看FormatJS的文档时，似乎只允许扩展现有的格式化程序（例如formats，{{1 }}）。我当前的用例是一个名称列表，我想用逗号将它与最后一个用连词（例如number）结合起来。理想情况下，我只传递一个列表（date），格式化程序将使用该语言的适当联接形式。目前支持吗？

Answer 1

我认为您可以使用内置的 select 格式化程序来实现此目标，如下所示：

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}"
}

这将允许您更改位置分隔符（考虑到某些语言是从右向左读取的）。 join('')仅连接所有“分隔符”名称以构建枚举字符串。

请注意，我使用unicode \u00a0字符作为空格，因为通常的空格如果放在插值字符串中首先被忽略。

React-intl自定义格式化程序

1 个答案: