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

Question

我在一个react原生应用程序中使用i18next和react-i18next，更具体地说是通过输入验证。我尝试将t()作为参数传递给no组件，但收到错误消息"TypeError: n is not a function. (In 'n('errorMessages.emailNoMatch')'，'n‘is undefined)“。任何建议都非常感谢，因为我对编码相对较新，并且我已经在这个问题上搜索了几天。

下面是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

对我来说，最终起作用的是直接从i18next调用t函数，并将名称空间作为前缀传递给t函数。

import i18next from 'i18next;

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

Answer 2

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 3

您不能直接从初始化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;