Question

你好，我是npm软件包“ react-i18next”，用于本地化。我已经完成了所有设置。

在我的语言文件中，带有值的键正常显示，但是带有对象的键不显示。

我的i18n.js

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

import englishTranlations from './locales/en/translation.json';
import germanTranslations from './locales/de/translation.json';
import italianTranslations from './locales/it/translation.json';

i18n.use(XHR)
    .use(LanguageDetector)
    .init({
        lng: 'en',
        resources: {
            en: {
                translations: englishTranlations
            },
            de: {
                translations: germanTranslations
            },
            it: {
                translations: italianTranslations
            }
        },
        fallbackLng: 'en',
        debug: true,

        // have a common namespace used around the full app
        ns: ['translations'],
        defaultNS: 'translations',

        keySeparator: false, // we use content as keys

        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ','
        },

        react: {
            wait: true
        }
    });

export default i18n;

我的index.tsx“入口点”

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

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

serviceWorker.unregister();

我在src / locales中有三个翻译文件

en / translations.json

{
    "introduction": "Hi",
    "my": {
        "key": "foo"
    }
}

de / translations.json

{
    "introduction": "Hallo",
    "my": {
        "key": "boo"
    }
}

it / translations.json

{
    "introduction": "Ciao",
    "my": {
        "key": "woo"
    }
}

这就是我的使用方式

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import './App.scss';

const App: React.FC = () => {
    const { t, i18n } = useTranslation();
    return (
        <Suspense fallback={<p>Loading ...</p>}>
            <main className="App">
                <p>{t('introduction')}</p>
                <p>{t('my.key')}</p>
                <div>
                    <button onClick={() => i18n.changeLanguage('en')}>English</button>
                    <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
                    <button onClick={() => i18n.changeLanguage('it')}>Italian</button>
                </div>
            </main>
        </Suspense>
    );
};

export default App;

{t（'introduction'）}

可以完美运行

{t（'my.key'）}

不起作用，它呈现为my.key

你知道怎么了吗？

谢谢！

React-i18next深度键未显示

0 个答案: