0

Непосредственно из компонента реакта делаю запрос к api. Ответ приходит на английском языке и выводится на экран.

Хочу сделать приложение с 2 языками русском и английском.

Как грамотно реализовать переключение языков и перевод ответа сервера?

4
  • АПИ должно уметь возвращать ответ на разных языках, иначе локализация сильно затруднена или невозможна. Хотя зависит от АПИ, у вас что за данные в ответе? 17 июн 2018 в 14:59
  • погодное api. в том то и дело, что единственные адекватные и бесплатные погодные api англоязычные.
    – md5hash
    17 июн 2018 в 19:22
  • Это дело сервера, и фронту тут ничего не поделать, рекомендую внимательнее поизучать api, потому что много погодных api имеет полноценную локализацию, например openweathermap.org везде имеет url параметр lang, по которому возвращает локализированные данные
    – TiiRiiX
    18 июн 2018 в 6:22
  • я как раз с ним работаю. но он переводит не все, а только пару слов
    – md5hash
    18 июн 2018 в 9:54

1 ответ 1

1

React Intl

Пожалуйста, посмотрите эту статью: React Intl: интернационализация React-приложений.

Гид по библиотеке

Установка

npm i react-intl

Пример использования

Структура проекта

├── src
│    ├── app
│    │    └── index.js
│    ├── i18n
          ├── locales.js
│    │    └── messages.js
...

Использование

src/app/index.js

import { IntlProvider, FormattedMessage } from 'react-intl';
import { LOCALES } from '../i18n/locales.js';

function App() {
    const locale = LOCALES.ENGLISH
    return ( 
        <IntlProvider
            messages={messages[locale]}
            locale={locale}
            defaultLocale={LOCALES.ENGLISH}
        >
            <FormattedMessage id='example_key' />
        </IntlProvider>
    );
}

src/i18n/locales.js

export const LOCALES = {
  ENGLISH: 'en-US',
  RUSSIAN: 'ru-RU',
  ... (Другие языки)
}

src/i18n/messages.js

import { LOCALES } from './locales'

export const messages = {
  [LOCALES.ENGLISH]: {
    example_key: 'Hello, World!'
  },
  [LOCALES.RUSSIAN]: {
    example_key: 'Привет, Мир!'
  },
  ... (Другие языки)
}

Примечание

  • Вам необходимо объявить переводы строк, чтобы их в дальнейшем использовать.
  • Ключи в атрибуте id компонента FormattedMessage и сообщений messages файла src/i18n/messages.js должны совпадать.
  • В сообщениях возможно использование переменных по типу {n, number, ::currency/USD}, где первый элемент (n) — это ключ (key), который используется для поиска соответствующих данных. Второй элемент (type) — это тип данных для преобразования, соответствующий определенной локации. Использование в компоненте: <FormattedMessage id='price_display' values={{ n: 59.99 }} />

Ссылка на документацию React Intl.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.