页面的多种语言（react-i18next）

Question

我正在为语言使用 react-i18next 库。

问题：我需要为网站使用用户语言，但对于文章我需要使用本文的语言。

我的解决方案：我想将当前文章包装在另一个 I18nextProvider 中并将文章 lang 传递给它。 我希望它会很好:) 如果它有效，我会在这里写解决方案。

我的问题：也许存在这个问题的另一种解决方案？

Answer 1

其作品：

export const LanguageContainer: React.FC<Props> = (props) => {
  const i18n = React.useMemo(() => {
    const xhr = new XHR(undefined, {
      loadPath: (languages, namespace) => {
        const version = app.Version ? `?v=${app.Version}` : '';
        const dir = app.Production ? Configuration.Localization.RootDir : Configuration.Localization.DefaultRootDir;
        return url.resolve(dir, `./${props.lang}/${namespace}.json${version}`);
      },
    });
    const I18n = i18next.createInstance().use(xhr);

    I18n.init({
      ns: ['general'],
      defaultNS: 'general',
      fallbackLng: Configuration.Localization.DefaultLanguage,
      whitelist: Configuration.Localization.Languages.map((x) => x.key),
    });

    return I18n;
  }, [props.lang]);

  return (
    <I18nextProvider i18n={i18n}>
      {props.children}
    </I18nextProvider>
  );
};

以及如何使用：

<LanguageContainer lang="en">
   // here components which need to use lang en     
</LanguageContainer>

Answer 2

<LanguageContainer lang=({language})>
  // here components which need to use lang en     
</LanguageContainer>

这是最好的，因为这个值是 object 您从客户那里发送的组件。 在这种情况下使用上下文也不错

Answer 3

获取其他语言的更简单的解决方案是调用i18n.getFixedT('language-code') 。