React实现页面国际化

什么是国际化?

给大家简单举个例子,一个公司做自己的官网,刚开始面对的只是中国的客户,可能业务做大了,外国人也发现了你的产品好,他们可能会了解一下,就去登录你们的官网,而他们发现他们看不懂,这时候就需要一个功能就是国际化了

功能实现图片

image.png

image.png

首先我们需要下载 react-intl 这个包里面的两个组件分别为 IntlProviderFormattedMessage

IntlProvider

首先拆开这个词来说把 IntlProvoider ; Intl 就是国际的意思,而 Provoider 是供给者的意思 , 这个 IntlProvider 的标签硬放在顶层Dom树上,包裹起我们要更改的字体,这样字体才可以切换,稍后介绍 ./locales/index 文件夹

image.png

FormattedMessage

其次就是 FormattedMessage ,也拆开看看, Formatted 就是格式化 ,而 Message 是信息的意思,最后的意思是格式化信息,换个通俗一点的就是,想要切换的格式,比如 中文 英文,需要你自己定义的,

还需要一个文件

这个文件是我们 中文 和 英文

image.png

里面存放着相同字段的不同对应的翻译

image.png

./locales/index(IntlProvider)

在这个文件夹里面,首先引入了我的两个,刚刚定义的中英文文件 , 还有我们所需要的仓库

image.png

其次我们需要连接上仓库,因为仓库有一个初始值就是中文,我们需要点击事件来切换英文,

image.png

这段代码的上面一段就是我们要传的值注意这里你要是 , 变换英文为en , 传的值就为 en ,return的unus 也要和你的文件名字对上

image.png

这段代码的底部我们看见了 Provoider , Provoider 上面的属性分别的 locale defaultlocale , mssage 第一个是值 , 第二个是初始值,第三个是信息我们要传入的,括号里面的对应的是我们的方法就是上面return的值

还有一点要在你要变换的状态上加上key 一个字段(字段对应的是你们的刚刚提到的文件夹里面的字段)

image.png

实现

最后把他包裹上给他点击实现切换仓库里面的初始值就可以实现拉

image.png

可能有的小伙伴还是一脸问号 可以私信我我会给你解答的!!

猜你喜欢

转载自juejin.im/post/7053208068162584607