i18next 翻译外部组件

Question

我是 i18next 的新手，正在尝试 localize/translate 网站。一切都适用于组件内部的翻译，但外部（意味着 json 带有 i18n.t() 的文件它不会检索所需的信息，而是显示默认值。

我正在使用 create-react-app 并且它是文件夹引用的默认设置，也许这是关键问题，但我找不到原因和要更改的内容。

import i18n from '../../i18n';


const navigation = [
    {
        'id'      : 'dashboard',
        'title'   : i18n.t('analytics.title', 'NOT FOUND'),
        'type'    : 'group',
        'icon'    : 'apps',

    }
  ]

export default navigation;

这里是 i18n.js 文件的设置：

import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
import detector from "i18next-browser-languagedetector";

i18n

  .use(detector)
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: localStorage.getItem('language') || 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: ['en', 'se', 'da'],
    debug: true,
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }

  })

  export default i18n;

和 index.js：

import 'typeface-muli';
import './react-table-defaults';
import './react-chartjs-2-defaults';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import './styles/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from 'app/App';

 ReactDOM.render(
   <I18nextProvider i18n={i18n}>
   <App />
   </ I18nextProvider>
   ,
   document.getElementById('root'));

serviceWorker.unregister();

我刚刚获得默认值：'NOT FOUND'...

Answer 1

您正在使用后端服务在浏览器中异步获取翻译。导入 i18n 时，您可能希望翻译随时可用，但事实并非如此 - i18n.init 也是一种异步方法（如果您尝试等待它，您将能够利用 t 函数).

一种可能的方法是定义翻译键：

const navigation = [
  {
    ...
    'title_key': 'analytics.title',
    ...
  }
]

然后在组件内将其传递给 t：

navigation.map(({ title_key }) => <li>t(title_key)</li>)

Answer 2

只能附和帕维尔所说的。这为我节省了很多时间！经历了这么多代码如https://github.com/i18next/react-i18next/issues/1236#issuecomment-762039023 但是没用。

只有 Pavel 的建议有效！这允许您仍然在组件中使用 useTranslation() ，同时从 non-components （例如 redux store/ ）

导入选项

例如，我在 Redux 商店/文件夹中有这样的东西：

export const xOptions = [
  {
    value: 'university',
    label: 'service_types_uni',
    imgPath: '/university.jpeg',
  },
];

并在组件中导入它：

import xOptions from '../store/options/manyOptions'
import Card from '../components/Card';
import { useTranslation } from 'react-i18next';
......
const ServicePage = (props) => {
 const { t } = useTranslation();
 return(

   xOptions.map((option) => (
     <Card title={t(`${option.label}`)} />
    )
   )
 )

}

希望这对其他人也有帮助！

i18next 翻译外部组件

i18next translation outside component

json

i18next

react-i18next