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

曾经终败给现在 2022-09-14 12:27 496阅读 0赞

[官方文档对于这个插件的描述][Link 1]

首先配置国际化的`json文件`，为了项目结构清晰，在en-US和zh-CN的文件夹中新建各自页面的json文件，最后统一引入en-US.js和zh-CN.js文件里面即可：  
![在这里插入图片描述][a33f4b69f7fe4f5bb4e765e07a4c7fc8.png]  
引入文件如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oWi5Y2K5ouN44CB_size_20_color_FFFFFF_t_70_g_se_x_16]  
写完一个页面的`国际化配置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} />   // 切换语言环境的样式
    	)
    }

--------------------

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

[Link 1]: https://umijs.org/zh-CN/plugins/plugin-locale#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F
[a33f4b69f7fe4f5bb4e765e07a4c7fc8.png]: /images/20220828/a6ecf33877cf485683dea7591d568b3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oWi5Y2K5ouN44CB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/01be66c1e92b40998bd08da06ca09374.png