在组件外部如何使用 react - i18next 中的 t （）？

在 React 项目中使用 react-i18next 库来实现国际化时，通常在组件内部通过 useTranslation Hook 或者 withTranslation 高阶组件来获取 t 函数，用于翻译文本。但有时候我们需要在组件外部，例如在一个模块或者工具函数中使用 t 函数，这种情况下就不能使用这些 React 特有的方法。

为了在组件外部使用 t 函数，我们可以直接从 i18next 实例中获取。以下是一个具体的步骤和例子：

步骤 1: 初始化 i18next

首先，确保在应用的入口文件中初始化了 i18next：

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          "welcome_message": "Welcome to React"
        }
      },
      fr: {
        translation: {
          "welcome_message": "Bienvenue à React"
        }
      }
    },
    lng: "en",
    fallbackLng: "en",

    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

步骤 2: 在组件外部使用 i18next

一旦你的应用实例化了 i18next，你可以在任何模块中直接使用它：

javascript
import i18n from './i18n'; // 确保从正确的路径导入你的 i18n 配置

function getWelcomeMessage() {
  return i18n.t('welcome_message');
}

console.log(getWelcomeMessage()); // 将根据当前语言设置打印 "Welcome to React" 或 "Bienvenue à React"

示例

假设你有一个工具函数文件 utils.js，你需要在其中进行一些文本的国际化处理：

javascript
import i18n from './i18n';

export function formatError(errorCode) {
  return i18n.t(`error_messages.${errorCode}`);
}

这种方法让你可以在应用的任何地方，不依赖于 React 组件的生命周期或上下文，使用 t 函数进行文本的国际化。

结论

使用 i18next 的实例直接在组件外部获取和使用 t 函数是一个非常有效且简单的方法，特别是在需要在纯 JavaScript 模块中进行国际化处理的场景中。这种方法保持了代码的清晰和模块化，也使得国际化功能的测试和维护更加容易。