位置: 编程技术 - 正文

React-intl 实现多语言的示例代码(react either)

编辑:rootadmin

推荐整理分享React-intl 实现多语言的示例代码(react either),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react either,reactcli,react constructor,react操作dom,react-immutable,react操作dom,react操作dom,react操作dom,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在项目中添加了语言国际化的功能。

语言国际化,也有人说成是语言本地化,其实就是为Web App添加多语言,我们的项目当前包含了中文版和英文版,按理来说『逐字替换』也不是多大事儿,但是,这么Low的做法,有钱途吗?

一开始的时候,我考虑的是传统的为整个项目添加config文件,根据不同的语言和地区,加载不同的config文件,就能够达到界面语言切换的目的。当然,也正是因为这个想法太过于幼稚,所以才被称为『一开始』的想法。语言的国际化不仅仅是将界面上的UI文字翻译成另一种语言,还包括了日期&时间显示,数字显示(英文环境下每隔3位一个逗号:1,),量词的显示(一个苹果是apple,两个苹果就应该是apples),甚至还有一个字符串中间插了一个变量的情况("今天午饭吃了{count}个鸡腿")...

所以这并不只是一个简单的字符替换问题,并且,我们要很方便的导出一个目录,放到word或者page当中,给到其他同事对照着进行翻译工作,这个非常重要!!难道你要让产品经理直接在代码里改么?或者你想一个一个搜索替换?不考虑清楚就干的话,相信我,You'll pay for this。

作为一个有追求的代码家,你肯定不希望在index.html当中增加一行<Script>引用吧?另外,UI中的文字全部都是使用图片的那个同学,请起立,滚。如果想要在一个React项目中,优雅的import something from somewhere,然后将界面中的文字用<首字母大写 /> 组件替代,最后通过简单的配置实现语言的国际化,那我们就用React-intl吧。

React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它

组件用法

为了和React 比较融和,我们可以使用组件的方式

1.安装

2.添加引用

3.添加 locale 配置文件

zh-CN.js

en-US.js

4.使用<IntlProvider />

这个组件用于设置 in 的上下文,它将包装应用程序的根组件,以便整个应用程序将配置在 in 的上下文中.最主要的两个配置项是: loacle 当前的语言环境 messages 当前语言的内容。

React-intl 实现多语言的示例代码(react either)

我们要动态切换语言,需要动态改这两个配置。

5.使用<FormattedMessage />

基础用法

如果当前语言环境是 中文,它会显示你好 ,如果是英文环境,会显示Hello.

动态传值

我们定义 intl.name 的时候模板里用到了{name} ,这个代表我们可以动态传值,我们可以通过FormattedMessage中的 values 属性传一个JSON对象,这是就会动态显示我们的内容了。

6.其它组件用法

Ract-intl 为我们提供了丰富的组件,可以帮我们很好的处理字符串,时间,日期 ,大家可以自己查看 API,如有不明白的地方,我可以留言。

API用法

有时候我们可能需要在代码中动态做 国际化,这就需要动态API 了。下面我简单介绍下怎么用

1.导入 injectIntl

2.在组件中注入

我在项目中用到了Redux,注入的时候应该向上面那样,如果你没有用Redux ,只需要 export defuault injectIntl(App)

3.使用 intl 对象

我们通过第二步的注入,现在在我们在 组件的 props 上会得到一个 intl 对象,它提供的方法和咱们上边介绍的组件基本相对应,这时候我们想要显示字符串,可以使用formatMessage 方法:

formatMessage的第一个参数可以传入Id, 第二个参数传入 values ,更详细的了解,请查看API

结束语

教程的代码,我已放到github 上,大家如果需要,自行查看 React-intl

标签: react either

本文链接地址:https://www.jiuchutong.com/biancheng/369718.html 转载请保留说明!

上一篇:详解React-Native全球化多语言切换工具库react-native-i18n(react native community)

下一篇:基于ES6作用域和解构赋值详解(edxposed 作用域)

  • 销售利税率计算公式及分析
  • 建筑业无票支出
  • 收到发票冲红怎么做分录
  • 上年少计提工会经费本年怎么调整
  • 小规模发票单张限额
  • 无力支付什么意思
  • 对公账户卡号是私人账号
  • 5个点的税率是多少
  • 程序法和实体法的划分标准
  • 一般纳税人不开票收入怎么填增值税申报表
  • 独立核算分公司注销与总公司账务
  • 装卸费和保险费是价外费用吗
  • 城市生活垃圾处理收费管理办法
  • 收到对方开错的发票怎么处理
  • 投资性房地产计量模式的转换
  • 房地产企业临时售楼部房产据含土地价值吗
  • 发票开具税收分类是什么意思?
  • 公司汽车车险抵税多少
  • 蔬菜批发公司销售蔬菜是否免税
  • 稳岗补贴发放给职工需要交个税吗?
  • 存货周转天数计算公式是360还是365
  • 结构化存款是什么
  • 供应商赠送
  • 信用减值损失借方余额在利润表中
  • 企业分红给企业股东怎么交税
  • 现金清偿债务怎么算
  • 收到货款未发货可以开发票吗
  • win7系统打开软件就停止工作
  • 进口代理流程
  • 行政单位房租收入上交分录
  • 矿山机械设备租赁有限公司
  • PHP:mb_preferred_mime_name()的用法_mbstring函数
  • 收到汇算清缴退税账务处理
  • 手机苹果14
  • 收到投标保证金利息如何账务处理
  • fetchall的用法
  • 贷款减值损失准备怎么算
  • 出售解除监管协议书
  • element-ui table使用type=‘selection‘复选框全禁用-全选禁用
  • 更改税种需要哪些资料
  • 第二季度企业所得税怎么计提
  • thinkphp 模板标签
  • 报关单在哪里打出来
  • 预缴和缴纳的区别
  • 固定资产清理怎么报税呢
  • rbac权限管理设计
  • 将购入的原材料用于不动产在建工程
  • 企业所得税成本核定
  • 定额发票已验旧怎么办
  • 固定资产清理时增值税怎么处理
  • 人力资源行业企业成长
  • 购入研发设备可以全额抵扣吗
  • 公司分期付款购车如何做账
  • 采购材料未付款填什么凭证
  • 预提费用为什么是负债
  • 赞助支出为什么纳税调整
  • 样品 报关
  • 超期应收款管控
  • sql server错误和使用情况报告
  • mysql查询慢的优化方案
  • UNIX系统中文件的索引表结构
  • centos7怎么查看磁盘空间
  • fedora系统怎么安装
  • wintogo.exe
  • Win10 Mobile 10549预览版增DPI缩放 瞬间手机变电脑
  • 此电脑右键
  • lsass.exe在哪个文件夹
  • omaws32.exe - omaws32是什么进程 有什么用
  • linux vmware命令行
  • linux安装后没有网卡只有lo
  • SpriteBuilder Demo学习笔记
  • 手机注册发送验证码收不到
  • linux查看so中的函数
  • js判断用户输入密码
  • python listnode
  • jquery实现轮播图步骤
  • 个人所得税代扣代缴手续费退库申请
  • 停车票日期在哪里
  • 尤溪特产春节礼品
  • 收心归位经典语录短句
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设