umi使用plugin-locale配置国际化(useIntl)

官方文档对于这个插件的描述

首先配置国际化的json文件，为了项目结构清晰，在en-US和zh-CN的文件夹中新建各自页面的json文件，最后统一引入en-US.js和zh-CN.js文件里面即可：

引入文件如下：

写完一个页面的国际化配置json后，在页面中使用即可：

import { useIntl } from 'umi';

export default (props) => {
	// 为什么不要直接使用 formatMessage 这个语法糖？
	// 虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 useIntl 或者 injectIntl，可以实现同样的功能。
	const intl = useIntl();
	const t = (id) => intl.formatMessage({ id })  // 写成传参方式

	return (
		<div title={t('layout.user.link.privacy')}></div>

		// 官方文档写法如下
		<button type="primary">
	      {intl.formatMessage(
	        {
	          id: 'name',
	          defaultMessage: '你好，旅行者',
	        },
	        {
	          name: '旅行者',
	        },
	      )}
	    </button>
	)
}

提供手动设置当前语言环境setLocale：

import { setLocale } from 'umi';

// 刷新页面
setLocale('zh-TW', true);

// 不刷新页面
setLocale('zh-TW', false);

获取当前语言环境getLocale：

import { getLocale } from 'umi';

console.log(getLocale()); // en-US | zh-CN

umi中提供一个切换语言的组件：

import { SelectLang } from 'umi';

const GlobalHeaderRight = () => {
	return (
		<SelectLang className={styles.action} />   // 切换语言环境的样式
	)
}

---

就酱，有问题多看文档，看文档~~