Как правильно сделать локализацию на React?

Question

[Роман Якимчук]

Друзья,

Как на React красиво сделать перевод приложения?

Я такие задачи вижу перед локализацией:

1. В шаблоне (JSX) используется компонент локализации текста плюс дефолтный текст перевода внутри
   
2. Компонент локализации принимает ID данного перевода
   
3. Есть инструмент для извлечения этих ID по всему приложению, и далее они помещаются в отдельный файл (например, JSON)
   
4. Мы берем JSON, переводим, добавляем в приложение, и приложение выводит перевод взяв текст по ID, и подставив переменные, которые мы можем передать через компонент
   

Вобщем, мне нравится идея Ангуляра, там очень просто. Пишешь текст, даешь ему ID, вводишь команду, и на выходе получается файл для перевода. Всё.

Есть что-то похожее на Реакте?
Как лично вы у себя работаете с локализацией?

Опробовал react-intl, но получается совсем неудобно, слишком много действий чтобы один ключ перевести.
Ощущуние, что я неправильно готовлю локализацию на Реакте.

Answer 1

[Роман Якимчук]

Закрываю вопрос, разобрался.
defineMessages вообще не нужен, это пустая обертка для извлечения ключей, который работает и без неё.

Если кому интересно: https://github.com/yakimchuk/react-intl-extractor
Просто вызываем команду, и всё ключи экспортятся в JSON.

Answer 2

[Даниил Маслов]

react-intl использует ID для работы с локализацией, почему много действий для перевода одного ключа? Все описанные вами задачи он как раз таки выполняет.

Comments

[Роман Якимчук]

Мне не нравится что нужно сначала составлять общий список ключей через defineMessages, а потом нужно еще отдельно держать локализации, в которых должны быть переводы по ключам из defineMessages, причем ключи могут быть разные.

Поэтому фактически вместо создания пары ключ + перевод, делается одна пара ключ + описание ключа в defineMessages, и вторая пара ключ + перевод. Фактически, defineMessages делает прокси-объект (грубо), и он нам не нужен, но избавиться от него, видимо, никак.

Проще было бы писать

<FormattedMessage id="foo">Foo default text</FormattedMessage>

, и создать один файл ru_RU.json с { "foo": "Перевод Foo" }, и всё.

Если вы знаете как выбросить defineMessages, подскажите, это было бы супер.

s0xzwasd

[Роман Якимчук]

Да, я неправильно готовил этот модуль.
Нашел как обойтись без defineMessages, стало намного проще.

https://stackoverflow.com/questions/37217125/how-t...

[Даниил Маслов]

Роман Якимчук, отлично :)