如果用户在浏览器中使用不支持的语言，如何在 React 的自定义函数中添加对某种语言的回退

Question

我正在尝试向我们的网络应用程序添加后备语言功能。目前，如果用户使用的语言与其浏览器语言所支持的语言不同，则应用程序会崩溃。我试图做到这一点，如果用户在他的浏览器中使用不受支持的语言，应用程序会将语言更改为英语。

我最初在创建翻译选项时尝试使用像 i18next 这样的库，但我没有让它与我们的应用程序一起工作，所以在获得一些外部帮助后，这就是我们处理翻译的方式：

  const currentUser = useSelector(Select.User.current);
  const language = _language || currentUser.language;
  const translations = {
    en,
    de,
    fr,
  };
  const supportedLanguages = Object.keys(translations);
  return [translations[language], supportedLanguages];
}

这是状态控制器

  const noLanguageSet = !currentUser.language;

  useDeepCompareEffect(() => {
    if (!currentUser.current) return;
    if (noLanguageSet) {
      // Select browser language as default
      const browserLang =
        window.navigator.language.split('-')[0] ||
        window.navigator.userLanguage.split('-')[0] ||
        'en';
      actions.editUser({ ...currentUser.ref, language: browserLang });
    }
  }, [currentUser.current]);

  return null;

但是，如果用户使用我们的应用程序不支持的浏览器语言，我现在完全不知道如何编写上述回退功能。非常感谢所有帮助！

Answer 1

如果您知道支持的语言列表，您可以指定一些默认语言并在不支持用户语言时使用它。

supportedLanguages.includes(browserLanguage) ? browserLanguage : defaultLanguage;

如果用户在浏览器中使用不支持的语言，如何在 React 的自定义函数中添加对某种语言的回退

How to add a fallback to a certain language in custom function in React if user has a non-supported language in browser

javascript

translation

localization

reactjs