WithTranslation HOC ищет перевод только в первом пространстве имен
Я обновляю свой проект с i18next^11.0.0 на i18next^15.0.0 и с react-i18next^7.0.0 на react-i18next^10.0.0. Раньше я использовал translate HOC, но теперь он заменен на с переводом. Итак, мой простой компонент React после этих изменений выглядит так:
import React from 'react';
import { withTranslation } from 'react-i18next';
const AboutControl = props => {
const { t } = props;
return (
<div className = "about-control">
<p className = "about-control-application-name">
{t('name')} {VERSION}
</p>
<p>
{t('supported-browsers')}:
</p>
<ul>
<li>Google Chrome >= 55</li>
<li>Mozilla Firefox >= 53</li>
</ul>
</div>
);
};
export default withTranslation(['about', 'application'])(AboutControl);
Перевод ключа supported-browsers определяется в пространстве имен about, а перевод ключа name — в пространстве имен application. Однако новая версия библиотеки не переводит ключ name в приведенном выше примере:
Если я изменю порядок about и application в withTranslation позвоните
export default withTranslation(['application', 'about'])(AboutControl);
все становится наоборот (supported-browsers не переводится):
В старой версии react-i18nextОпция nsMode была доступна проблема решена, но больше не работает:
await i18next.init({
whitelist: this.languages,
lng: this.language || this.languages[0],
fallbackLng: this.languages[0],
lowerCaseLng: true,
debug: false,
resources: {},
interpolation: {
escapeValue: false // not needed for React
},
react: {
wait: true,
nsMode: true
}
});
Я не нашел ничего связанного с этим в документация. Вот пример оттуда:
// load multiple namespaces
// the t function will be set to first namespace as default
withTranslation(['ns1', 'ns2', 'ns3'])(MyComponent);
Похоже, никаких дополнительных опций не требуется, а то интересно, какие пространства имен нужно передавать, если не для перевода текстов компонента. Это ошибка? Или какое-то обходное решение существует?
Руководство по переходу с 9 на 10 не указывает на какие-либо изменения в этом поведении.
Ответы 2
react-i18next не было nsMode с версии 10.0.0. Но этот пул реквест добавляет его обратно (опубликовано в 10.7.0).
Можно было бы переводить тексты (даже без передачи пространств имен в withTranslation или useTranslation), просто добавляя к ключам префикс пространства имен (ns:key):
import React from 'react';
import { withTranslation } from 'react-i18next';
const AboutControl = props => {
const { t } = props;
return (
<div className = "about-control">
<p className = "about-control-application-name">
{t('application:name')} {VERSION}
</p>
<p>
{t('about:supported-browsers')}:
</p>
<ul>
<li>Google Chrome >= 55</li>
<li>Mozilla Firefox >= 53</li>
</ul>
</div>
);
};
export default withTranslation()(AboutControl);
Передача пространств имен в withTranslation требуется при асинхронно загружать ресурсы перевода, чтобы убедиться, что они доступны перед рендерингом.
У меня была та же описанная проблема (функция ns, указанная в функции withTranslation, была опущена), и после поиска решения и ничего не найдя, я попробовал что-то другое, и это было правильное решение.
Вместо ключей префикса по пространству имен вы можете настроить пространство имен для использования, используя:
const {t} = useTranslation ('yourNSname');
Вы можете продолжать использовать префиксные ключи для доступа к значениям из других пространств имен.
Я надеюсь, что это поможет вам или кому-то с той же проблемой.