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

Question

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

United States, China, Japan, and France.

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

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

Answer 1

Я некоторое время пытаюсь реагировать и думаю, что это работает как шарм. На самом деле, они дают несколько функциональных примеров, которые стоит попробовать.

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

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

Answer 2

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