React Umi国际化配置方法

桃花映红谁的脸

1、config.ts配置开启umi国际化

1. export default defineConfig({
   
2.     ...,
   
3.     locale: {
   
4.         default: 'zh-CN',
   
5.         antd: false,
   
6.         title: false,
   
7.         baseNavigator: true,
   
8.         baseSeparator: '-',
   
9.   }
   
10. })

复制代码

2、国际化文件配置
在src下创建locales文件，如果项目配置了

1. singular: true

复制代码

，

1. locales

复制代码

要改成

1. locale

复制代码

在

1. locales

复制代码

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

1. // zh-CN.ts文件
   
2. export default{
   
3.     'project.package.login.hello':'你好！'
   
4. }

复制代码

1. // en-US.ts文件
   
2. export default{
   
3.     'project.package.login.hello':'Hello Work!'
   
4. }

复制代码

3、在函数组件中使用国际化-useIntl

1. import {useIntl} from 'umi';
   
2. const FunctionComponents = (props:any)=>{
   
3.     const intl = useIntl();
   
4.     return (
   
5.         <>
   
6.         {intl.formatMessage({id:'project.package.login.hello'})}
   
7.         </>
   
8.     )
   
9. }
   
10. export default FunctionComponents

复制代码

4、在类组件中使用国际化-injectIntl

1. import {injectIntl} from 'umi';
   
2. class FunctionComponents{
   
3.     return (
   
4.         <>
   
5.         </>
   
6.     )
   
7. }
   
8. export default injectInit(FunctionComponents)

复制代码

5、在ts文件中使用国际化-getIntl

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

复制代码

6、动态设置国际化getLocale、setLocale

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

复制代码

到此这篇关于React Umi国际化配置的文章就介绍到这了,更多相关React Umi国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319129930.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！