React Umi国际化配置方法

2024-04-19 0 19

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

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.login.hello\’:\’你好!\’
}
// en-US.ts文件
export default{
\’project.package.login.hello\’:\’Hello Work!\’
}

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

import {useIntl} from \’umi\’;
const FunctionComponents = (props:any)=>{
const intl = useIntl();
return (
<>
{intl.formatMessage({id:\’project.package.login.hello\’})}
</>
)
}
export default FunctionComponents

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

import {injectIntl} from \’umi\’;
class FunctionComponents{
return (
<>
</>
)
}
export default injectInit(FunctionComponents)

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

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

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

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

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

您可能感兴趣的文章:

  • react之umi配置国际化语言locale的踩坑记录
  • react umi 刷新或关闭浏览器时清除localStorage方式
  • React+umi+typeScript创建项目的过程

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript React Umi国际化配置方法 https://www.u-9.cn/biancheng/javascript/187634.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务