在组件外部使用react-i18next中的t()

Question

我在React Native应用程序中使用i18next和react-i18next，更具体地说是输入验证。我试图将 t() 作为 no 组件中的参数传递，但收到错误“TypeError: n 不是函数。（在 'n('errorMessages.emailNoMatch')' 中，'n' 未定义） ”。非常感谢任何建议，因为我对编码相对较新，并且我已经为此问题搜索了几天。

这是 i18n.js 代码：

import i18next from 'i18next';
import common_de from './translations/de/common.json';
import common_en from './translations/en/common.json';
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
// Set up translations
i18next.init({
  interpolation: { escapeValue: false }, // React already does escaping
  lng: 'en', // language to use
  resources: {
    de: {
      common: common_de, // 'common' is our custom namespace
    },
    en: {
      common: common_en,
    },
  },
  debug: true,
});
export default i18next;

RegisterValidator.js 代码的一部分，我尝试将 t() 作为参数传递，但它没有将 t 读取为 switch 语句内的参数。:

import React from 'react';
import { useTranslation } from 'react-i18next';
// import { withTranslation } from 'react-i18next';

const RegisterValidator = (type, value, email, t) => {
  let validated = true;
  let warningMsg = [];
  switch (type) {
    case 'username':
      if (!value.includes(' ')) return [true, ''];
      else {
        warningMsg = t('errorMessages.username');
        return [false, warningMsg];
      }
    default:
      return [validated, ''];
  }
};
export default RegisterValidator;

这是 App.js 的一部分

import React from 'react';
import './i18n';
import i18n from 'i18n-js';
import i18next from 'i18next';
import { I18nextProvider } from 'react-i18next';

function App() {
  return (
    <I18nextProvider i18n={i18next}>
      <Insert more code here />
    </I18nextProvider>
  );
}

export default App;

Answer 1

最终对我有用的是直接从

t

调用

i18next

函数，并将命名空间作为前缀传递给

t

函数。

import i18next from 'i18next';

const RegisterValidator = () => {
   return i18next.t('common: errorMessages.username')
}

Answer 2

您无法直接从初始化 i18n 的文件导入实例。

import i18n from "./i18n";

...


i18n.t("required_field"); //and use it like this

我的 i18n 初始化文件

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";

import LanguageDetector from "i18next-browser-languagedetector";
import CustomLanguageDetector from "./CustomLanguageDetector";

const languageDetector = new LanguageDetector();
languageDetector.addDetector(CustomLanguageDetector);

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(languageDetector)
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: "en",
    // debug: true,
    load: "languageOnly",
    backend: {
      loadPath: `/i18n/{{lng}}.json`,
    },
    react: { useSuspense: false },
    whitelist: ["pt", "en"],
    nonExplicitWhitelist: true,
    detection: {
      // order and from where user language should be detected
      order: ["CustomLanguageDetector"],
      lookupLocalStorage: "@AppName:language", //Change your appname here if you're storing the languge in local storage.
      caches: ["localStorage"],
      checkWhitelist: true,
    },
  });

export default i18n;

Answer 3

t() 外部组件将不起作用，请将消息对象发送到

RegisterValidator

并使用它。

示例-

function Component() {
   // t is declared here
   const message = {
      error: t('errorMessage'),
      success: t('successMessage')
   }

   // and then send this message object to RegisterValidator
   RegisterValidator(.., .., .., message);
}

Answer 4

您也可以导出重要的

t

函数，这样您就不必到处重复

i18n.

：

i18n 初始化文件：

translation/config

// Some configuration of i18n
export default i18n.t;

一些使用 i18n 的文件

import t from 'translation/config';
t('localized-label1')