React Umi国际化配置方法
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 FunctionComponents4、在类组件中使用国际化-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 immer与Redux Toolkit使用教程详解
这篇文章主要介绍了React中immer与Redux Toolkit的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2022-10-10
React使用xlsx和js-export-excel实现前端导出
这篇文章主要为大家详细介绍了React如何分别使用xlsx和js-export-excel实现前端导出功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-02-02
解析TypeError:import_react_native.AppState.removeEventListener
这篇文章主要为大家介绍了TypeError:import_react_native.AppState.removeEventListener is not a function问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09


最新评论