Поддерживает ли React-intl преобразование названий стран в зависимости от местоположения?

Я пытаюсь отобразить список названий стран на основе локали. Например, допустим, у нас есть следующий список стран:

United States, China, Japan, and France.

и вы являетесь клиентом, просматривающим мой веб-сайт. Если языковой стандарт вашей учетной записи установлен как en_US, вы должны увидеть английскую версию списков стран. Однако, если локаль вашей учетной записи - ja_JP, вы должны увидеть список в японской версии списка и так далее.

Возможно ли это с помощью React-intl? Я пытаюсь решить эту проблему динамически, а не жестко запрограммированным переводом. Я много искал, но не мог найти решения.


reactjs javascript react-redux react-intl
person Max Doung    schedule 08.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Некоторое время я пробую react-intl, и мне кажется, что это прекрасно работает. Собственно, они приводят несколько функциональных примеров, которые стоит попробовать.

  1. Клонируйте репо. (https://github.com/yahoo/react-intl)
  2. Запустите npm install или yarn install в корневом каталоге репо, на этом шаге будут установлены некоторые зависимости, которые будут использоваться в качестве примера.
  3. Перейдите к примеру dir и translations dir.
  4. Запустите npm build или yarn build
  5. Посетите localhost: 8080, чтобы увидеть результаты. Вы можете переключать языки между en-US и en-UPPER.

Все эти языковые наборы не жестко запрограммированы в коде приложения и сохраняются отдельно в каталоге build / lang в формате json. Думаю, что react-intl может решить вашу проблему!

person fung    schedule 08.10.2017

arrow_upward
0
arrow_downward

Поскольку все дело в данных, вам не нужна специальная библиотека React. Вы можете использовать только данные о странах, например здесь. Он в json со следующей схемой (я вырезал несколько полей, полный пример можно найти здесь):

{
    "name": {
        "common": "Austria",
        "official": "Republic of Austria",
        "native": {
            "bar": {
                "official": "Republik Österreich",
                "common": "Österreich"
            }
        }
    },
    "cca2": "AT",
    "cca3": "AUT",
    "translations": {
        "deu": {"official": "Republik Österreich", "common": "Österreich"},
        "fra": {"official": "République d'Autriche", "common": "Autriche"},
        "ita": {"official": "Repubblica d'Austria", "common": "Austria"},
        "jpn": {"official": "オーストリア共和国", "common": "オーストリア"},
        "spa": {"official": "República de Austria", "common": "Austria"}
    },
}

Обратите внимание, что хотя в разделе переводов используются ISO 639-3 коды, а в разделе идентификации используются ISO 3166-1 коды, вы можете легко сопоставить их, поскольку в разделе на родном языке используется код ISO 639-3.

Допустим, вам нужно показать список заранее определенных стран. Все, что вам нужно сделать, это получить их cca3 коды и поместить их в массив. Затем, когда вы определили свой языковой стандарт пользователя в формате ISO 639-3 (userLoc в следующем примере), вы можете использовать lodash или аналогичную библиотеку для получения соответствующих переводов:

// userLoc - current user locale in ISO 639-3
// codesToSelect - array of country codes in ISO 3166-1 you want to show

_.map( codesToSelect, ( cca3 ) => {

    let countryObject = _.find( countriesData, { 'cca3': cca3 } );

    let translatedName = ( countryObject && 
                           countryObject.translations && 
                           countryObject.translations[ userLoc ] )
        ? countryObject.translations[ userLoc ]
        : cca3

    return translatedName;
} )

Обратите внимание, что для указанного кода страны может не быть перевода, поэтому cca3 будет использоваться в качестве запасного варианта.

person Dennis Tsoi    schedule 08.10.2017