欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Umi國際化配置方法

 更新時間：2024年04月02日 11:30:10   作者：hyupeng1006  
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1、config.ts配置開啟umi國際化

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

2、國際化文件配置

在src下創(chuàng)建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、在函數(shù)組件中使用國際化-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、動態(tài)設(shè)置國際化getLocale、setLocale

// 刷新頁面
setLocale('zh-CN', true);
// 不刷新頁面
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN

到此這篇關(guān)于React Umi國際化配置的文章就介紹到這了,更多相關(guān)React Umi國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • React?跨端動態(tài)化核心技術(shù)實例分析

    React?跨端動態(tài)化核心技術(shù)實例分析

    這篇文章主要為大家介紹了React?跨端動態(tài)化核心技術(shù)實例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-10-10
  • 一起來了解React的Hook

    一起來了解React的Hook

    這篇文章主要為大家詳細介紹了React的Hook，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-03-03
  • 淺談react-native熱更新react-native-pushy集成遇到的問題

    淺談react-native熱更新react-native-pushy集成遇到的問題

    下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解超簡單的react服務(wù)器渲染(ssr)入坑指南

    詳解超簡單的react服務(wù)器渲染(ssr)入坑指南

    這篇文章主要介紹了詳解超簡單的react服務(wù)器渲染(ssr)入坑指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器

    如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器

    這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實例代碼給大家講解，需要的朋友可以參考下
    2018-11-11
  • React Hooks使用常見的坑

    React Hooks使用常見的坑

    React Hooks 是 React 16.8 引入的新特性，允許我們在不使用 Class 的前提下使用 state 和其他特性。接下來通過本文給大家分享React Hooks使用避坑指南，一起學(xué)習(xí)下吧
    2021-06-06
  • React中的權(quán)限組件設(shè)計問題小結(jié)

    React中的權(quán)限組件設(shè)計問題小結(jié)

    這篇文章主要介紹了React中的權(quán)限組件設(shè)計,整個過程也是遇到了很多問題，本文主要來做一下此次改造工作的總結(jié)，對React權(quán)限組件相關(guān)知識感興趣的朋友一起看看吧
    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組件中的一個方法,用于動態(tài)設(shè)置表單字段的值,它接受一個對象作為參數(shù),對象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡便使用,需要的朋友可以參考下
    2023-08-08
  • 詳解React中Props的淺對比

    詳解React中Props的淺對比

    這篇文章主要介紹了React中Props的淺對比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
    2021-05-05

最新評論