Question

我正在将react-i18next lib用于语言。

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

我的解决方案：我想将当前文章包装在另一个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>

这是最好的选择，因为此值是您从客户组件发送的对象。在这种情况下，可以使用上下文

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

2 个答案: