ReactUmi国际化配置方法，

ReactUmi国际化配置方法，

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国际化内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

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