Локализация приложения React.js с помощью i18next

Предпосылки:

• Приложение React.js
• React-i18next

Настраивать

После установки i18next вам необходимо создать файл i18n.js, желательно в той же папке, что и ваш app.js. В этом файле вы инициализируете локаль, свои переводы и даже можете добавить собственные средства форматирования. Для справки, вот как выглядит мой файл: Примечание: Не забудьте называть свое пространство имен «перевод» независимо от того, как вы называете свои файлы, так как это значение по умолчанию и гарантирует, что i18next найдет ваш переводы.

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import de from '../public/locales/de/translations.json';
import en from '../public/locales/en/translations.json'; 
i18n.use(reactI18nextModule).init({    
   fallbackLng: 'en',    
   lng: navigator.language || navigator.userLanguage,     
   resources: {        
      en: {            
         translation: en        
      },        
      de: {            
         translation: de        
      }    
   },     
   interpolation: {        
      escapeValue: false   
   },    
 
   wait: true
}); 
export default i18n;

Затем вы создадите файлы json для своих переводов. Я решил поместить их в папку src и создал такую ​​структуру: locale → en → translations.json. Это упрощает добавление дополнительных языков. В своих файлах json вы создадите узнаваемый ключ и перевод на этот язык. Вот небольшой пример такого файла:

{
   "group": "Gruppe",
   "group_plural": "Gruppen",
   "blog_title": "Eine React.js App mit i18next lokalisieren"
}

Как видите, я использую сборку во множественном числе i18next, это особенно полезно, если вы не знаете, что будет использоваться до времени выполнения. Вот пример кода, демонстрирующий эту функциональность:

i18n.t('group', {count: numberOfGroups})

Подключение

Если вы используете HOC, лучше всего вводить переводы, так как это позволяет вам менять язык на лету. Я также использую redux, поэтому большинство моих компонентов уже инкапсулированы, но это не проблема, поскольку мы можем просто инкапсулировать эти завернутые компоненты. Вот как это выглядит при экспорте HOC:

import { translate } from 'react-i18next';
// If you are using redux or other wrappers
export default translate()(
   connect()(AccountEditorContainer)
);
// Just i18next
export default translate()(AccountEditorContainer);

После того, как вы подключили свой компонент, вы сможете получить доступ к своим переводам следующим образом:

this.props.t('blog_title')

Примечание. Для убеждения используйте const {t} = this.props

Автономный

Однако вам не нужно этого делать, и иногда вы хотите использовать i18next в сагах или функциях, которые не экспортируют HOC. В этих случаях вы можете напрямую импортировать файл i18n.js, который будет выглядеть следующим образом:

import i18n from '../i18n';
i18n.t('blog_title')

Резюме

i18next - это быстрый и простой способ локализовать ваше приложение, поскольку Интернет становится все более глобальным. Первоначальная настройка может потребовать некоторых усилий, особенно если у вас уже есть готовое приложение. Однако добавлять новые строки очень просто, поэтому я рекомендую начать этот процесс как можно раньше.