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

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

不同的分隔符在另一种语言中很常见，即;代替逗号
“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-18next 翻译动态逗号分隔列表？

1 个答案: