1、config.ts配置开启umi国际化
1 2 3 4 5 6 7 8 9 10 | 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文件，并且在文件中做配置
1 2 3 4 | // zh-CN.ts文件export default{ 'project.package.login.hello':'你好！'} |
1 2 3 4 | // en-US.ts文件export default{ 'project.package.login.hello':'Hello Work!'} |
3、在函数组件中使用国际化-useIntl
1 2 3 4 5 6 7 8 9 10 | import {useIntl} from 'umi';const FunctionComponents = (props:any)=>{ const intl = useIntl(); return ( {intl.formatMessage({id:'project.package.login.hello'})} > )}export default FunctionComponents |
4、在类组件中使用国际化-injectIntl
1 2 3 4 5 6 7 8 | import {injectIntl} from 'umi';class FunctionComponents{ return ( > )}export default injectInit(FunctionComponents) |
5、在ts文件中使用国际化-getIntl
1 2 3 4 | import {getIntl} from 'umi';export const DataException = { hello: getIntl().formatMessage({id:'project.package.login.hello'})} |
6、动态设置国际化getLocale、setLocale
1 2 3 4 5 | // 刷新页面setLocale('zh-CN', true);// 不刷新页面setLocale('zh-CN', false);console.log(getLocale()); // zh-CN |
到此这篇关于React Umi国际化配置的文章就介绍到这了,更多相关React Umi国际化内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
