withTranslation HOC ищет перевод только в первом пространстве имен - PullRequest
Новая
       14

withTranslation HOC ищет перевод только в первом пространстве имен

0 голосов
/ 09 апреля 2019

Я обновляю свой проект с 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 ]

0 голосов
/ 21 июля 2019

У меня была описанная проблема (ns, указанные в функции withTranslation, были опущены), и после поиска решения и не найдя ничего, я попробовал что-то другое, и это было правильное решение.

Вместо префиксаключи по пространству имен, вы можете настроить пространство имен для использования с помощью:

const {t} = useTranslation ('yourNSname');

Вы можете продолжить использовать префиксные ключидля доступа к значениям из других пространств имен.

Я надеюсь, что это поможет вам или кому-то с такой же проблемой.

0 голосов
/ 11 апреля 2019

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 требуется, когда вы асинхронно загружаете ресурсы перевода , чтобы обеспечить их доступность перед рендерингом.

...