Переводы в подпакете

Я пытаюсь перевести кое-что в свое приложение React. Это отлично работает с i18next и react-i18next. Я использую HOC withNamespaces для рендеринга переводов и сканирования их с помощью PoEdit. Все идет нормально.

Однако есть две проблемы, с которыми я сталкиваюсь. У меня также есть библиотека, в которой хранятся все компоненты пользовательского интерфейса. Больше похоже на все стили, которые простираются от самого семантического пользовательского интерфейса. Там также применимы некоторые переводы, и я хотел использовать тот же react-i18next и там. Во время тестирования в сборнике рассказов все выглядит хорошо, однако, когда я запускаю npm link и связываю пакет с моим основным приложением, я внезапно получаю эту ошибку:

caught TypeError: (0 , _reactI18next.withNamespaces) is not a function

Второй вопрос, который у меня есть, заключается в том, как я могу расширить переводы? Например, у меня есть эта библиотека, которая переводит поле A как «Как дела?». Однако при запуске проекта для клиента я заметил, что заказчик хочет другой перевод для чего-то, что является частью библиотеки. Есть ли способ тогда все еще перезаписать его? Поскольку переводы, конечно же, связаны и загружаются внутри компонента.

Ниже приведен код, как это выглядит:

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(XHR)
  .use(LanguageDetector)
  .use(reactI18nextModule)
  .init({
    load: 'languageOnly',
    backend: {
      loadPath: '../dist/locales/{{lng}}/{{ns}}.json'
    },
    fallbackLng: {
      'en-US': ['en']
    },
    ns: ['uielements'],
    defaultNS: 'uielements',
    fallbackNS: 'uielements',
    debug: false,
    keySeparator: '##',
    interpolation: {
      escapeValue: false // not needed for react!!
    },
    react: {
      wait: true,
      bindI18n: 'languageChanged loaded',
      bindStore: 'added removed',
      nsMode: 'default'
    }
  });

export default i18n;

И сами компоненты:

export default withNamespaces()(Dialog);

person Dirkos    schedule 10.10.2018    source источник


Ответы (1)


Я была такая же проблема. Оказалось, что компонент withNamespaces HOC был представлен в версии react-i18next 8.0.0. Убедитесь, что у вас установлена ​​последняя версия:

npm i i18next@latest react-i18next@latest

Я только что проверил i18next v12.0.0 и react-i18next v8.3.8. Все работает нормально.

person Alexander    schedule 19.11.2018