接下来如何使用 react-18 翻译动态逗号分隔列表？

Question

我有一个动态逗号分隔的链接列表，最后用“and”代替逗号。

所以我的列表可以有这四种状态：

“您可以使用 A.”
“您可以使用 A 和 B。”
“您可以使用 A、B 和 C。”
“您可以使用 A、B、C 和 D。”

动态列表在 React 中呈现，现在我想用 react-18next 和 Trans 组件翻译它。但是我不明白。

应该翻译列表前的文字和“and”这个词。 A、B、C、D是名字，每个语言都一样。

<Trans>
    <span>
        You can use <>{useLinkList}</>.
    </span>
</Trans>

在第三种情况下，i18n 看起来像这样（因为 React Fragments）：

"<0><0><1>You can use <1><0>A</0><1>, </1><2>B</2><3> and </3><4>C</4></1>.</1></0></0>"

但是我怎样才能让它适用于所有 4 个案例？

Answer 1

您的问题有一个程序化的解决方案，这可能会导致项目后期出现一些 translation/internationalization 问题。这些可能是：

不同的分隔符在另一种语言中很常见，即 ;而不是逗号
“and”位于其他地方

将 useLinkList 分成两部分。第一个包含 ["A"] 到 ["A", "B", "C"] 的列表。第二部分仅包含最后一个元素或被省略。调用两次翻译函数，也可以翻译“and”

// In your component
{t("linkList", {
        elements: [[FirstPart].join(","), lastElement].join(t(" and ")),
})}

// In your locale
{
"linkList": "You can use {{ elements }}.",
" and ": " and "
}

另一种更灵活的本地化方法是使用 ICU 消息。如果案例是固定的，一个选项可以是使用 select 语句。这里有一个quick guide for the syntax.

接下来如何使用 react-18 翻译动态逗号分隔列表？

How can I translate dynamic comma-seperated lists with react-18next?

reactjs

react-i18next