i18n 翻译函数中的文本

Question

我在翻译组件外的一些错误消息时遇到了一些问题。

这是我的 i18n 设置

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: (cb: (baseLanguage: string) => void) => {
    let prevLanguage: string;
    store.subscribe(() => {
      const selectBaseLanguage = makeSelectBaseLanguage();
      const baseLanguage = selectBaseLanguage(store.getState());
      if (baseLanguage !== prevLanguage) {
        prevLanguage = baseLanguage;
        cb(baseLanguage);
      }
    });
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(languageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    debug: true,
    resources: languagesResources,
    // language to use if translations in user language are not available.
    fallbackLng: defaultLanguage,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },

    react: {
      wait: false,
      useSuspense: false,
    },
  });

我必须找到此文件中的错误代码 ----> httpErrors: en_HttpError

路径文件：@config/locales/languageConfig

export const languagesResources = {
  en: { ...en, httpErrors: en_HttpError },
  tr: { ...tr, httpErrors: tr_HttpError },
};

这是 function* 我需要翻译的地方：

路径文件：@config/utils/helpers

export function* _handleFetchError(error: any) {
  const { httpStatus, httpDescriptions, errorCode, errorDescription } = error;
  console.log('!!! Start Error Handler !!!:', httpStatus, httpDescriptions, errorCode, errorDescription);

  const test = i18n.t('en_HttpError');

  yield put(sagaShowFullScreenOverlay(GenericOverlay, errorModal));
}

现在 const test 我只得到一个未定义的错误，

我如何根据收到的没有未定义错误的 errorCode 值获得正确的翻译？

Answer 1

我需要更多关于你的错误的信息，但你可能想做这样的事情： i18next Fallback。因此，您可以显示一条取决于 httpStatus 响应的消息，例如 error.404 as Página no encontrada

考虑一下您的 i18n.t 函数等待注册翻译的文本键。

在我的简单案例中：

i18n.init({
    fallbackLng: {
        default: ['es'],
    },
    resources: {
        es: {
            common: {
                Name: 'Nombre',
....

然后，我可以 i18n.t('Name') 获取 'Nombre'

i18n 翻译函数中的文本

i18n translate text in a function

i18next

reactjs

react-i18next