react-intl - 如何配置 react-intl 以使所有方言区域都回退到其母语？

Question

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

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 />，但这似乎比必要的更hacker......

标签： react-intlformatjs

Answer 1

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

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

...

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

// @see https://tools.ietf.org/rfc/bcp/bcp47.txt

function getBrowserLocale() {
  switch (navigator.language) {
    case "zh":
    case "zh-Hant":
    case "zh-Hans":
    case "zh-TW":
    case "zh-HK":
    case "zh-CN":
      return "zh";
    // case "zh-CN":
    //   return "zh-CN";
    default:
      return "en";
  }
}

export default getBrowserLocale;