Я пытаюсь перевести кое-что в свое приложение 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);