React Umi支持多
语言切换，以下是实现方法：
1. 安装
umi-plugin-locale插件：运行`npm install
umi-plugin-locale --save-dev`或`yarn add
umi-plugin-locale --dev`。
2. 在.
umirc.js文件中配置locale插件：
```
export default {
plugins: [
['
umi-plugin-locale', {
default: 'zh-CN',
baseNavigator: true,
antd: true,
}],
],
};
```
其中，default为默认
语言，baseNavigator为基于浏览器
语言设置
语言，antd为
使用Ant Design组件的多
语言支持。
3. 在src/locales目录下创建
语言文件，如zh-CN.js、en-US.js，其中包含对应
语言的翻译信息：
```
export default {
'app.title': '
React Umi 多
语言示例',
'app.hello': '你好 {name}！',
};
```
4. 在组件中
使用intl对象实现多
语言切换。在组件中引入
FormattedMessage组件，并
使用intl.
format
Message方法获取对应翻译信息：
```
import {
FormattedMessage } from '
umi/locale';
function Hello(props) {
const { name } = props;
return (
<div>
<h1>
<
FormattedMessage id="app.title" />
</h1>
<p>
<
FormattedMessage id="app.hello" values={{ name }} />
</p>
</div>
);
}
```
其中，id属性对应
语言文件中的键值，values属性为动态参数。
5. 实现
语言切换功能。可以通过点击按钮或链接等方式触发切换
语言的函数，然后调用intl对象的setLocale方法切换
语言：
```
import { connect } from 'dva';
import { Button } from 'antd';
import {
FormattedMessage, setLocale } from '
umi/locale';
function LanguageSwitch(props) {
const { dispatch } = props;
return (
<div>
<Button
onClick={() => {
setLocale('en-US', false);
dispatch({ type: 'global/changeLocale', payload: 'en-US' });
}}
>
<
FormattedMessage id="lang.en-US" />
</Button>
<Button
onClick={() => {
setLocale('zh-CN', false);
dispatch({ type: 'global/changeLocale', payload: 'zh-CN' });
}}
>
<
FormattedMessage id="lang.zh-CN" />
</Button>
</div>
);
}
export default connect()(LanguageSwitch);
```
在setLocale方法中，第一个参数为切换的
语言类型，第二个参数为是否
使用浏览器
语言设置。在dispatch方法中，将
语言类型传递给dva model中的changeLocale函数，实现全局
语言切换。
最低0.47元/天 解锁文章
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
