Question

我正在尝试根据区域设置显示国家/地区名称列表。例如，假设我们有一个国家/地区列表如下：

United States, China, Japan, and France.

您是浏览我网站的客户。如果您帐户的区域设置设置为en_US，那么您应该会看到国家/地区列表的英文版本。但是，如果您的帐户的区域设置是ja_JP，您应该在列表的日语版本中看到该列表，依此类推。

使用React-intl可以吗？我试图动态地解决这个问题而不是硬编码的翻译。我经常搜索，但无法提出解决方案。

Answer 1

因为所有关于数据的所有内容都不需要特殊的React库。您只能使用有关here等国家/地区的数据。它是在json中使用以下模式（我剪切了一些字段，完整示例可以找到here）：

{
    "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将用作后备广告。

Answer 2

我尝试使用react-intl一段时间，我认为它就像一个魅力。实际上，他们给出了一些值得尝试的功能性例子。

克隆回购。（https://github.com/yahoo/react-intl）
在repo的根目录下运行npm install或yarn install，此步骤将安装一些将由示例使用的依赖项。
转到示例目录和翻译目录。
运行npm build或yarn build
访问localhost：8080查看结果。您可以在en-US和en-UPPER之间切换lang。

所有这些语言集都不是应用程序代码中的硬编码，而是以json格式单独保存在build / lang目录中。我认为react-intl可以解决你的问题！

React-intl是否支持根据位置转换国家/地区名称？

2 个答案: