时间戳

首页 > 解决方案 > How to handle dropdown data and fetched English data when my user choose another language?

reactjs - How to handle dropdown data and fetched English data when my user choose another language?

问题描述

I am work on adding more than one language to my Application using i18n-js. My concern is how to handle static data like currency, level of experience, ...etc which is written in English to use it by my dropdown list when user select one item from dropdown it should be sent to the back end in English format and how to handle fetched data with English format if user have chosen another language.

Is it regular to save same type of data to backend in different languages.

I have tried to add all my static data in my language files and when user choose a specific language it would fetch it's corresponded data from language file.

Here is a code sample from language files:

English file

export default en = {
     educationDropDownList: [
        {
            label: `Secondary School`,
            value: `Secondary School`
        },
        {
            label: `Deploma`,
            value: `Deploma`
        },
        {
            label: `Bachelor's degree`,
            value: `Bachelor's degree`
        },
        {
            label: `Master's degree`,
            value: `Master's degree`
        },
        {
            label: `Doctoral degree`,
            value: `Doctoral degree`,
        }

    ]
}

Arabic file

export default ar = {
    educationDropDownList: [
        {
            label: `مدرسة ثانوية`,
            value: `مدرسة ثانوية`
        },
        {
            label: `شهادة دبلوم`,
            value: `شهادة دبلوم`
        },
        {
            label: `درجة البكالوريوس`,
            value: `درجة البكالوريوس`
        },
        {
            label: `درجة الماجيستير`,
            value: `درجة الماجيستير`
        },
        {
            label: `درجة الدكتوراه`,
            value: `درجة الدكتوراه`,
        }

    ]
}

I have two cases here. first, how to handle sending selected data to Backend with different language format and how to receive that selected data and view it with proper language format.

标签： reactjsreact-nativelocalizationinternationalizationi18next

解决方案

使用不同的语言会使事情变得混乱。保持与您一起开发的那个。换句话说，i18n 从链接到键的语言文件中提取语言。例如（https://i18njs.com/#language_files）：

{
  "values":{
    "Yes": "はい",
    "No": "いいえ",
    "Ok": "Ok",
    "Cancel": "キャンセル"
  }
}

不管是什么语言，软件都在一个键上运行并忽略这些值。在浏览器上显示该值时，下拉菜单会将键包含的任何值显示为值，例如：如果语言设置为日语，i18n("Yes") 会给您はい。

动态地填充您的阿拉伯语和英语集合，例如：

export default genericdropdown = {
    educationDropDownList: [
        {
            label: i18n("Yes"),
            value: "Yes"
        },
        {
            label: i18n("No"),
            value: "No"
        }, ...

也许我误解了你，但我希望它有所帮助。

推荐阅读