前端使用react-intl-universal进行国际化

最新推荐文章于 2025-04-25 08:00:00 发布

原创

最新推荐文章于 2025-04-25 08:00:00 发布

· 3k 阅读

5 ·

版权

文章标签：

#reactjs #javascript #css

本文介绍如何在React项目中使用react-intl-universal进行国际化，包括安装、App.js配置、事件监听、语言切换及各种类型的国际化处理，如变量替换、数字格式化、货币展示、日期显示等。

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

一、国际化 / i18n

目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。

“国际化”的简称：i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）

二、react项目国际化

react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的组件和API可以与ReactJS绑定。这种方法引入了两个主要问题：
一：只能应用于视图层，例如React.Component。对于Vanilla JS文件（原生JS），无法对其进行国际化。
二：要获取React.Component的实例，react-intl不能使用常规方法如this.refs.comname

相比之下，react-intl-universal具有以下特征：

react-intl-universal不仅可以在React.Component中使用，还可以在Vanilla JS中使用
简单。只有三个主要的API和一个可选的帮助器。
显示不同语言环境的数字，货币，日期和时间。
多元化字符串中的标签。
消息中的支持变量。
在消息中支持HTML。
支持150多种语言。
在浏览器和Node.js中运行。
消息格式由ICU标准严格执行。
支持嵌套JSON格式的语言环境数据。

三、具体实现

1. 安装

cnpm install react-intl-universal --save

2. App.js文件

本地语言文件

在这里插入图片描述
en-US.json

{
    "tableTitle": "Results",
    "searchBoardTitle": "filter",
    "ReportNumber": "Report Number"
}

zh-CN.json

{
    "tableTitle": "列表",
    "searchBoardTitle":"查询",
    "ReportNumber": "报案号"
}

引入ant组件、加载语言环境数据

import { ConfigProvider } from 'antd';
import { emit } from './emit.js'
import zh_CN from 'antd/es/locale/zh_CN';
import en_US from 'antd/es/locale/en_US';
import intl from 'react-intl-universal';
const locales = {
  'en-US': require('./locales/en-US.json'),
  'zh-CN': require('./locales/zh-CN.json'),
};
...

初始化语言

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        antdLang: zh_CN,  // 修改antd  组件的国际化
    }
  }
  async componentWillMount(){
    const { userStore, history } = this.props;
    emit.on

最低0.47元/天解锁文章