如何配置react-intl以使所有方言语言环境都使用其母语？

Question

我建立了一个使用select元素在en和zh语言环境之间进行很好翻译的网站。现在，我想让我的代码根据navigator.language的值选择初始语言环境。这使我意识到我的语言环境是en-US，而不是en。当我将该值应用于<IntlProvider />的locale属性时，引发了许多新错误。

Error: [React Intl Error MISSING_TRANSLATION] Missing message: "details.reference" for locale "en-US", using default message as fallback.

由于默认消息为英文，因此UI仍然看起来不错。而且我猜想这些错误在生产中已被忽略。

但是，中文也出现同样的问题。如果用户的操作系统/浏览器语言环境设置为zh-HK，则react-intl将显示默认消息（英语），而不是zh.json中的翻译。

是否有解决此问题的聪明方法？？我知道我可以在将语言环境的地理位置部分传递给<IntlProvider />之前先将其剪裁掉，但这似乎比必要的方法更加骇客。

Answer 1

我写了一个函数来解决这个问题，但是希望找到一个更好的解决方案。

clang++ -Xlinker --export-dynamic -g toy.cpp `llvm-config --ldflags --system-libs --libs all` -O3 -o toy

const [locale, setLocale] = React.useState(getBrowserLocale());

...

<IntlProvider locale={locale} messages={messages[locale]}>