如何使用i18next为组件及其子组件设置特定翻译语言？

在Django框架中，我可以使用activate()（以及deactivate()）方法临时切换翻译语言；在模板中，则可借助{% language %}模板标签实现同样的语言切换效果。这种方式能够让整页使用通用语言翻译，仅将特定区域渲染为另一种语言。

我想了解，使用i18next是否也能实现类似功能，将部分组件渲染为其他语言？

更新：
感谢@Avi的评论，我参考相关回答取得了一定进展，但该方法仅支持为单个字符串指定语言。我希望实现的是为某个组件及其所有子组件设置特定语言，这是否可行？

完全可以实现让某个组件及其所有子组件统一使用特定语言的需求，以下是两种实用的实现方式：

方式一：使用getFixedT创建绑定特定语言的翻译函数 #

i18next提供的getFixedT方法可以生成一个绑定到指定语言的翻译函数，你可以将这个函数通过props传递给目标组件树，让所有子组件共享该语言的翻译能力：

import { useTranslation } from 'react-i18next';

// 父组件
function ParentComponent() {
  const { t: globalT, i18n } = useTranslation();
  // 创建绑定到法语的翻译函数
  const frT = i18n.getFixedT('fr');

  return (
    <div>
      {/* 全局语言渲染的内容 */}
      <p>{globalT('common.welcome')}</p>
      {/* 传递特定语言翻译函数给子组件树 */}
      <FrenchContentSection t={frT} />
    </div>
  );
}

// 子组件
function FrenchContentSection({ t }) {
  return (
    <div className="french-section">
      <h2>{t('section.title')}</h2>
      <p>{t('section.desc')}</p>
      {/* 嵌套子组件直接使用传入的翻译函数 */}
      <FrenchSubContent t={t} />
    </div>
  );
}

// 嵌套子组件
function FrenchSubContent({ t }) {
  return <p>{t('subcontent.note')}</p>;
}

方式二：通过React上下文封装特定语言翻译环境 #

如果组件嵌套层级较深，用props传递翻译函数会比较繁琐，这时可以通过自定义React上下文来封装特定语言的翻译环境，让整个组件树自动获取对应语言的翻译函数：

import { createContext, useContext, useTranslation } from 'react-i18next';

// 创建特定语言翻译上下文
const LanguageSpecificTContext = createContext(null);

// 上下文提供者组件
function LanguageSpecificProvider({ lng, children }) {
  const { i18n } = useTranslation();
  const fixedT = i18n.getFixedT(lng);

  return (
    <LanguageSpecificTContext.Provider value={fixedT}>
      {children}
    </LanguageSpecificTContext.Provider>
  );
}

// 自定义钩子，简化上下文获取
function useLanguageSpecificT() {
  const t = useContext(LanguageSpecificTContext);
  if (!t) {
    throw new Error('useLanguageSpecificT 必须在 LanguageSpecificProvider 内部使用');
  }
  return t;
}

// 使用示例
function ParentComponent() {
  const { t: globalT } = useTranslation();
  
  return (
    <div>
      <p>{globalT('common.intro')}</p>
      {/* 用提供者包裹需要切换语言的组件树 */}
      <LanguageSpecificProvider lng="fr">
        <FrenchContentSection />
      </LanguageSpecificProvider>
    </div>
  );
}

function FrenchContentSection() {
  const t = useLanguageSpecificT();
  return (
    <div>
      <h2>{t('section.title')}</h2>
      <FrenchSubContent />
    </div>
  );
}

function FrenchSubContent() {
  const t = useLanguageSpecificT();
  return <p>{t('subcontent.note')}</p>;
}

关键注意点 #

• 确保i18next已正确配置并加载了目标语言的翻译资源文件
• 上述两种方式都不会修改全局语言设置，仅对目标组件树生效
• 若使用类组件，可结合withTranslation高阶组件与getFixedT实现相同效果

内容的提问来源于stack exchange，提问作者decibyte