Реакция установки-i18next завершается неудачно с компонентом response-redux - PullRequest
Новая
       7

Реакция установки-i18next завершается неудачно с компонентом response-redux

1 голос
/ 06 ноября 2019

Я перепробовал все возможные варианты встроенного приложения response-i18next, Reaction-redux и машинописного текста.

Ниже приведен мой файл index.js: 

 import * as enTranslations from "./assets/locales/en";
 import * as frTranslations from "./assets/locales/fr";
 const resources = {
 en: { messages: enTranslations }
 };

  i18next
 .use(initReactI18next)
 .init({
  resources,
  fallbackLng: "en",
  debug: true,

 // have a common namespace used around the full app
 ns: ["translations"],
 defaultNS: "translations",
 namespaceSeparator: '.',
 keySeparator: false, // we use content as keys
 interpolation: {
   escapeValue: false
 },
 lng: "en",

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

Мой код app.js: 

 export default compose(withTranslation("translations"), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

Метод визуализации моего компонента и код экспорта: 

export default compose(
withTranslation('translations'),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

Метод визуализации: 

render() {
const { t } = this.props;
return (
    <h1>{CLIENTS_HEADER_TITLE} {t('title')}</h1>
);

Но я всегда вижу напечатанный ключ вместо значения ключа,Я не нашел ни одного примера с использованиемact-redux.

Я использую "Reaction-i18next": "^ 11.0.1", и я получаю ошибку отсутствующего ключа.

1 Ответ

1 голос
/ 06 ноября 2019

Ниже изменения кода заставляют это работать теперь.

Код моего app.js: 

 export default compose(withTranslation(), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

Код экспорта моего компонента: 

export default compose(
withTranslation(),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

Перемещено init в файл i18n.js: 

   import enTranslations from "./assets/locales/en";

    const resources = {
      en: {
        translation: {
          "title": "Welcome  {{name}}"
        }
      }
    };

    i18n
      .use(initReactI18next)
      .init({
        resources,
        lng: "en",
        keySeparator: "false",
        debug: true,
        interpolation: {
          escapeValue: false
        },
        useDataAttrOptions: true
      });

    export default i18n;

Вывод отладочной консоли помог мне разобраться в проблеме. 

 //import enTranslations from '....'
 {title: "Welcome  {{name}}", intro: "To get started and save to reload."}

 //import * as enTranslations from '....'
 Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 
 "Module"}
  default: {title: "Welcome  {{name}}", intro: "To get started and save to 
  reload."}
  Symbol(Symbol.toStringTag): "Module"
 __esModule: true
...