Umi 3.x和Antd 开启国际化示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

Antd pro v5集成了umi 3x， 国际化的方法感觉更简单一些。

1，config.ts配置

export default defineConfig({ 
    ..., 
    locale: { 
        default: 'zh-CN', 
        antd: false, 
        title: false, 
        baseNavigator: true, 
        baseSeparator: '-', 
  } 
}) 

2，国际化文件配置

在src下创建locales文件，如果项目配置了singular: true，locales 要改成 locale

在locales文件下新建zh-CN.ts、en-US.ts文件，并且在文件中做配置

// zh-CN.ts文件 
export default{ 
    'project.package.cuclife.hello':'你好cuclife！' 
} 

// en-US.ts文件 
export default{ 
    'project.package.cuclife.hello':'Hello cuclife！' 
} 

3，使用国际化文件

（1）在函数组件中使用国际化-useIntl

使用<FormattedMessage id='……'/>，umijs不推荐使用。

在使用到的地方主要用如下两行代码：

const intl = useIntl();
{intl.formatMessage({id:‘……’})}
例子

import {useIntl} from 'umi'; 
 
const ZjcopyComponents = (props:any)=>{ 
    const intl = useIntl(); 
     
    return ( 
        <> 
        {intl.formatMessage({id:'project.package.cuclife.hello'})} 
        </> 
    ) 
     
} 
 
export default ZjcopyComponents 

（2）在类组件中使用国际化-injectIntl

import { injectIntl } from 'umi'; 
const intl = this.props.intl; 
{intl.formatMessage({id:'……'})} 
export default injectIntl(类名); 

例子：

import { FormattedMessage, injectIntl } from 'umi'; 
import React, { Component } from "react"; 
class Value extends Component { 
  constructor(props) { 
    super(props); 
  } 
  render(){ 
  return( 
  const intl = this.props.intl; 
     <div className={styles.add}> 
          <Button className={styles.button} type="primary" onClick= {this.handleAdd}> 
            {intl.formatMessage({ id: 'btn.add.attribute.value' })} 
          </Button> 
     </div> 
  ) 
  } 
} 
export default injectIntl(Value); 

（3）在ts文件中使用国际化-getIntl

import {getIntl} from 'umi'; 
 
export const DataException = { 
    hello: getIntl().formatMessage({id:'project.package.login.hello'}) 
}  

（4）动态设置国际化getLocale、setLocale

// 刷新页面 
setLocale('zh-CN', true); 
 
// 不刷新页面 
setLocale('zh-CN', false); 
console.log(getLocale()); // zh-CN