Question

这是我的配置文件：

i18n.js：

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

const fallbc = ['en'];
const langArr = ['en', 'de'];

i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    });

export default i18n;

当我尝试这样做时：

import i18n from '../i18n';

return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

仅提供英语，不提供德语。我究竟做错了什么？

我的配置有问题吗？我觉得我真的很想解决这个问题。

Answer 1

i18n.Init是延迟加载函数，您必须等待必须调用callback。否则使用SyncBackend。否则启动应用程序会变得很懒。

示例：

import i18next from 'i18next';
import SyncBackend from 'i18next-sync-fs-backend';


// working
i18next
  .use(SyncBackend)
  .init({ initImmediate: false });

i18next.t('key'); // -> will return value

延迟启动：

export default (callback) => {
const instance = i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    },() => callback(instance));
};

import i18nInit from '../i18n';

i18nInit((i18n) =>{
// lazy start here
return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

})

更多：https://www.i18next.com/overview/configuration-options

为什么我的翻译不能与react-i18next一起使用？

1 个答案: