什么是国际化?
给大家简单举个例子,一个公司做自己的官网,刚开始面对的只是中国的客户,可能业务做大了,外国人也发现了你的产品好,他们可能会了解一下,就去登录你们的官网,而他们发现他们看不懂,这时候就需要一个功能就是国际化了
功能实现图片
首先我们需要下载 react-intl 这个包里面的两个组件分别为 IntlProvider 和 FormattedMessage
IntlProvider
首先拆开这个词来说把 Intl 和 Provoider ; Intl 就是国际的意思,而 Provoider 是供给者的意思 , 这个 IntlProvider 的标签硬放在顶层Dom树上,包裹起我们要更改的字体,这样字体才可以切换,稍后介绍 ./locales/index 文件夹
FormattedMessage
其次就是 FormattedMessage ,也拆开看看, Formatted 就是格式化 ,而 Message 是信息的意思,最后的意思是格式化信息,换个通俗一点的就是,想要切换的格式,比如 中文 英文,需要你自己定义的,
还需要一个文件
这个文件是我们 中文 和 英文
里面存放着相同字段的不同对应的翻译
./locales/index(IntlProvider)
在这个文件夹里面,首先引入了我的两个,刚刚定义的中英文文件 , 还有我们所需要的仓库
其次我们需要连接上仓库,因为仓库有一个初始值就是中文,我们需要点击事件来切换英文,
这段代码的上面一段就是我们要传的值注意这里你要是 , 变换英文为en , 传的值就为 en ,return的unus 也要和你的文件名字对上
这段代码的底部我们看见了 Provoider , Provoider 上面的属性分别的 locale defaultlocale , mssage 第一个是值 , 第二个是初始值,第三个是信息我们要传入的,括号里面的对应的是我们的方法就是上面return的值
还有一点要在你要变换的状态上加上key 一个字段(字段对应的是你们的刚刚提到的文件夹里面的字段)
实现
最后把他包裹上给他点击实现切换仓库里面的初始值就可以实现拉
可能有的小伙伴还是一脸问号 可以私信我我会给你解答的!!