react实现国际化

最新推荐文章于 2025-06-15 09:12:22 发布

weixin_44354236

最新推荐文章于 2025-06-15 09:12:22 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：国际化文章标签： react 国际化

本文链接：https://blog.youkuaiyun.com/weixin_44354236/article/details/99691401

国际化专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在React应用中实现国际化，包括静态和动态国际化。静态国际化是根据浏览器语言自动加载对应的语言模板，利用react-intl的IntlProvider和FormattedMessage组件。动态国际化则通过Redux store管理和切换语言。实现过程中需要下载react-intl，设置语言文件，并在路由配置中使用IntlProvider。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react实现国际化

静态国际化

首先解决静态国际化，即根据浏览器的语言，自动加载对应的语言模板。这里只需判断navigator.language类型即可，然后通过react-intl提供了IntlProvider组件，加载组件属性的locale和messages，最后在需要用到国际化的组件里，引入FormattedMessage组件（react-intl内置），通过id映射到对应的国际化文件里的属性（例如下面的en_US.js的hello）。即可实现静态国际化。

动态国际化

动态国际化，即用户可以通过按钮切换，实现语言的切换。最容易想到的方案就是，在语言模板放在redux的store里，提供一个切换语言的action，改变store里的国家和语言模板

实现思路

下载react-intl 下载到生产环境
在src下面设置文件夹language,里面放配置语言的文件

en-US文件

export default {
    'personage.personal_center': "personalCenter'",
    'personage.My_class': "MyClass",
    'personage.setting': 'Setting',
    'personage.log_out': 'logOut'
    
}

zh-CN 文件

export default {
    'personage.personal_center': "个人中心",
    'personage.My_class': "我的班级",
    'personage.setting': '设置',
    'personage.log_out': '退出登录',
    'questions.update_questions': '修改试题',
    'questions.add_questions': '添加试题'
    
}

其他语言文件同理，全部都采用相同的键名，键值后面跟相对应的语言

在route.js里面配置

addLocaleData：引入本地的 localedata
IntlProvider：包裹需要翻译的组件，用来传递给子类语言信息
FormattedMessage ：包裹需要实现多国语言的文字

// 1.引入国际化
import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
import zhCN from './lang/zh-CN';
import enUS from './lang/en-US.js';
//2. 配置国际化字典，也就是载入本地数据
const localMap = {
  en: enUS,
  zh: zhCN
}
addLocaleData([...en, ...zh]);
//3.IntlProvider包裹需要翻译的组件
//4.在model里面建文件，主要用于改变语言
export default {
    // 命名空间
    namespace: 'global',

    // 模块的状态
    state: {
        locale: navigator.language.indexOf('zh') != -1 ? 'zh' : 'en'
    },

    // 同步操作
    reducers: {
        updateLocale(state, action) {
            return { ...state, locale: action.payload };
        },
    }
};
//5.在展示组件里面
//injectIntl包裹住组件
通过行为改变语言

浏览器languages大全：（要按照规定起名字）
“af”, “sq”, “ar-SA”, “ar-IQ”, “ar-EG”, “ar-LY”, “ar-DZ”, “ar-MA”, “ar-TN”, “ar-OM”, “ar-YE”, “ar-SY”, “ar-JO”, “ar-LB”, “ar-KW”, “ar-AE”, “ar-BH”, “ar-QA”, “eu”, “bg”, “be”, “ca”, “zh-TW”, “zh-CN”, “zh-HK”, “zh-SG”, “hr”, “cs”, “da”, “nl”, “nl-BE”, “en”, “en-US”, “en-EG”, “en-AU”, “en-GB”, “en-CA”, “en-NZ”, “en-IE”, “en-ZA”, “en-JM”, “en-BZ”, “en-TT”, “et”, “fo”, “fa”, “fi”, “fr”, “fr-BE”, “fr-CA”, “fr-CH”, “fr-LU”,“gd”, “gd-IE”, “de”, “de-CH”, “de-AT”, “de-LU”, “de-LI”, “el”, “he”, “hi”, “hu”,“is”, “id”, “it”, “it-CH”, “ja”, “ko”, “lv”, “lt”, “mk”, “mt”, “no”, “pl”, “pt-BR”, “pt”, “rm”, “ro”, “ro-MO”, “ru”, “ru-MI”, “sz”, “sr”, “sk”, “sl”, “sb”,“es”, “es-AR”, “es-GT”, “es-CR”, “es-PA”, “es-DO”, “es-MX”, “es-VE”, “es-CO”, “es-PE”, “es-EC”, “es-CL”, “es-UY”, “es-PY”, “es-BO”, “es-SV”, “es-HN”, “es-NI”,“es-PR”, “sx”, “sv”, “sv-FI”, “th”, “ts”, “tn”, “tr”, “uk”, “ur”, “ve”, “vi”, “xh”,“ji”, “zu”