脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Umi配置

React Umi国际化配置方法

 更新时间：2024年04月02日 11:30:10   作者：hyupeng1006  
这篇文章主要介绍了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 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 跨端动态化核心技术实例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 一起来了解React的Hook

    一起来了解React的Hook

    这篇文章主要为大家详细介绍了React的Hook，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • 浅谈react-native热更新react-native-pushy集成遇到的问题

    浅谈react-native热更新react-native-pushy集成遇到的问题

    下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 详解超简单的react服务器渲染(ssr)入坑指南

    详解超简单的react服务器渲染(ssr)入坑指南

    这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    这篇文章主要介绍了如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,在vue及react中经常会遇到，今天通过实例代码给大家讲解，需要的朋友可以参考下
    2018-11-11
  • React Hooks使用常见的坑

    React Hooks使用常见的坑

    React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。接下来通过本文给大家分享React Hooks使用避坑指南，一起学习下吧
    2021-06-06
  • React中的权限组件设计问题小结

    React中的权限组件设计问题小结

    这篇文章主要介绍了React中的权限组件设计,整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结，对React权限组件相关知识感兴趣的朋友一起看看吧
    2022-07-07
  • ios原生和react-native各种交互的示例代码

    ios原生和react-native各种交互的示例代码

    本篇文章主要介绍了ios原生和react-native各种交互的示例代码，非常具有实用价值，需要的朋友可以参考下
    2017-08-08
  • React antd中setFieldsValu的简便使用示例代码

    React antd中setFieldsValu的简便使用示例代码

    form.setFieldsValue是antd Form组件中的一个方法,用于动态设置表单字段的值,它接受一个对象作为参数,对象的键是表单字段的名称,值是要设置的字段值,这篇文章主要介绍了React antd中setFieldsValu的简便使用,需要的朋友可以参考下
    2023-08-08
  • 详解React中Props的浅对比

    详解React中Props的浅对比

    这篇文章主要介绍了React中Props的浅对比的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-05-05

最新评论