React Umi国际化配置方法

 更新时间:2024年04月02日 11:30:10   作者:hyupeng1006  
这篇文章主要介绍了React Umi国际化配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

export default defineConfig({
    ...,
    locale: {
        default: 'zh-CN',
        antd: false,
        title: false,
        baseNavigator: true,
        baseSeparator: '-',
  }
})

2、国际化文件配置

在src下创建locales文件,如果项目配置了 singular: truelocales 要改成 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中组件之间通信的方式

    详解React中组件之间通信的方式

    这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • 浅谈react受控组件与非受控组件(小结)

    浅谈react受控组件与非受控组件(小结)

    本篇文章主要介绍了浅谈react受控组件与非受控组件(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React中引用CSS方式及写法大全(三种方式)

    React中引用CSS方式及写法大全(三种方式)

    在React中引用CSS的方法有多种,可以根据个人的喜好和项目的需求来选择,本文主要介绍了React中引用CSS方式及写法大全,感兴趣的可以了解一下
    2023-10-10
  • React中实现keepalive组件缓存效果的方法详解

    React中实现keepalive组件缓存效果的方法详解

    由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差。所以本文为大家介绍了React中实现keepalive组件缓存效果的方法,希望对大家有所帮助
    2023-01-01
  • react中的watch监视属性-useEffect介绍

    react中的watch监视属性-useEffect介绍

    这篇文章主要介绍了react中的watch监视属性-useEffect使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 一文详解React?Redux使用方法

    一文详解React?Redux使用方法

    这篇文章主要介绍了一文详解React?Redux使用方法,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • React diff算法原理详细分析

    React diff算法原理详细分析

    经典的diff算法中,将一棵树转为另一棵树的最低时间复杂度为 O(n^3),其中n为树种节点的个数。假如采用这种diff算法,一个应用有1000个节点的情况下,需要比较十亿次才能将dom树更新完成,显然这个性能是无法让人接受的
    2022-11-11
  • React元素与组件的区别示例详解

    React元素与组件的区别示例详解

    这篇文章主要为大家介绍了React元素与组件的区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React脚手架搭建的学习

    React脚手架搭建的学习

    本文主要介绍了React脚手架搭建的学习,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • React根据宽度自适应高度的示例代码

    React根据宽度自适应高度的示例代码

    本篇文章主要介绍了React根据宽度自适应高度的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论

?


http://www.vxiaotou.com