在我的i18next文件中调用另一个react组件

Question

我有下面的代码。

import i18next from 'i18next';
import React from 'react';
const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');
import { TRANSLATIONS_EN } from '../public/locales/en/en.js';
i18next
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: TRANSLATIONS_EN,
},
fallbackLng: 'fr',
});
i18next.changeLanguage(navigator.language);
export default i18next;

我正在从文件中获取TRANSLATIONS_EN。现在我需要从API获取这个值。所以我创建了下面的组件进行测试。

import React from 'react';
import axios from 'axios';

class TransFile extends React.Component {
constructor() {
super();
alert('Mahima');
}

componentDidMount() {
alert('Mahima');
//API code .
}

render() {
return <h2>Hi, I am a Mahima Saxena! + </h2>;
}
}
export default TransFile;

当我在i18文件中导入上述组件并调用时，没有输出。

import TransFile from './TransFile';
<div>
<TransFile />
</div>;

我在myi18next文件中插入了上述代码，但没有输出。它甚至没有打印警报。现在我的I18文件在下面，

import i18next from 'i18next';
import React from 'react';
const LanguageDetector = require('i18next-browser-languagedetector');
const initReactI18next = require('react-i18next');
import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js';
import { TRANSLATIONS_EN } from '../public/locales/en/en.js';
import { TRANSLATIONS_IT } from '../public/locales/it/it.js';
import { TRANSLATIONS_ES } from '../public/locales/es/es.js';
import TransFile from './TransFile';
//I Inserted below line
{
<div>
<TransFile />
</div>;
}
i18next
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: TransFile,
fr: TRANSLATIONS_FR,
es: TRANSLATIONS_ES,
it: TRANSLATIONS_IT,
},
fallbackLng: 'fr',
});
i18next.changeLanguage(navigator.language);
export default i18next;

我犯了什么错误。基本上，我必须从另一个组件分配值。

Answer 1

https://www.i18next.com/overview/getting-started创建一个像这里这样的简单结构，并使用导出默认值导出它。注意：通过自己导入来调用翻译文件。如果在组件之外使用

import i18n from '../i18n';
i18n.t('test')