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

react國際化react-intl的使用

 更新時間:2021年05月06日 11:24:43   作者:slowCoder  
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

react怎么實現(xiàn)國際化?react-intl插件提供了一套實現(xiàn)react國際化的方法,具體實現(xiàn)如下~~

一 搭建react環(huán)境和下載相應插件

默認你已經(jīng)安裝了nodejs 如果沒有裝的百度裝下 這里不再細講

利用react官方腳手架搭建react項目,已經(jīng)存在有的react項目也可忽略搭建這步;然后下載相關依賴 react-intl

npx create-react-app react-intl-demo  
npm i react-intl -S

等待下載完成

找到項目根目錄下的src文件夾 在里面新建一個叫l(wèi)ocale的文件夾 存放語言包設置的文件;這里只實現(xiàn)中英文切換,后續(xù)其他語言的都是一樣的操作

在這里插入圖片描述 

二 寫相關的配置文件

找到locale的intl.js文件 引入相關的插件 進行封裝暴露出去

import React, { useContext } from 'react'
import { IntlProvider } from 'react-intl' // 包裹在需要語言國際化的組件的最外層,和react-redux的Provider一樣 讓組件和組件內(nèi)的子組件都能使用react-intl提供的api和方法
import { mainContext } from '../reducer' // 這里使用的是useReducer 簡單的在根目錄下創(chuàng)建一個 來控制語言的全局狀態(tài)維護
import zh_CN from './cn' // 中文包
import en_US from './en' // 英文包

const Inter = (props) => {
    // 獲取默認的語言設置 也可以配合一些全局狀態(tài)管理進行結合使用 如redux Mobx或者react自身提供的useReducer等
  const { state } = useContext(mainContext)
  const chooseLocale = (val) => { 
    let _val = val || navigator.language.split('_')[0]
    switch (_val) {
      case 'en':
        return en_US
      case 'zh':
        return zh_CN
      default:
        return zh_CN
    }
  }
  let locale = state.locale // 獲取 locale
  let { children } = props
  // 包裹子組件 讓子組件共享react-intl的api 實現(xiàn)多語言
  return (
    <IntlProvider
      key={locale}
      locale={locale}
      defaultLocale='zh'
      messages={chooseLocale(locale)}
    >
      {children}
    </IntlProvider>
  )
}

export default Inter

cn.js

const zh_CN = {
    start: '開始',
    switch: '切換'
  }
  export default zh_CN
  

en.js

const en_US = {
    start: 'start',
    switch: 'switch'
  }
  export default en_US
  

reducer.js (src目錄下新建一個)

import React, { useReducer } from 'react'
const CHANGE_LOCALE = 'CHANGE_LOCALE'

const mainContext = React.createContext()

const reducer = (state, action) => {
  switch (action.type) {
    case CHANGE_LOCALE:
      return { ...state, locale: action.locale || 'zh' }
    default:
      return state
  }
}

const ContextProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, {
    locale: 'zh'
  })
  return (
    <mainContext.Provider value={{ state, dispatch }}>
      {props.children}
    </mainContext.Provider>
  )
}

export { reducer, mainContext, ContextProvider }

三 在App.js引入相關文件并使用

App.js

import './App.css';
import { ContextProvider } from './reducer'
import Inter from './locale/intl'
import View from './views'

function App() {
  return (
    <ContextProvider>
      <Inter>
        <View />
      </Inter>
    </ContextProvider>
  );
}
export default App;

四 新建views目錄下面使用相關的插件和api實現(xiàn)國際化

views新建一個 index.jsx 文件試試效果

import react, { useContext} from 'react'
import { mainContext } from '../reducer'
import { FormattedMessage } from 'react-intl'
 
function Index() {
    const { dispatch, state } = useContext(mainContext)
    const { locale } = state
    const changeLang = () => { // 改變狀態(tài)里的 語言 進行切換
        dispatch({
            type: 'CHANGE_LOCALE',
            locale: locale === 'zh' ? 'en' : 'zh'
        })
    }
    return (
        <div>
           <div>
            <FormattedMessage id="start" ></FormattedMessage>
           </div>
           <div>
                <button onClick={changeLang} > <FormattedMessage id="switch" ></FormattedMessage></button>
           </div>
        </div>
    );
}
export default Index;

最終目錄 紅框為新增

在這里插入圖片描述

就這樣 一個簡單的react國際化就完成了!
可以去試一試,如果項目有需要也可以按照這種移植進去
本次的demo已上傳GitHub:github地址 可自行克隆運行

到此這篇關于react國際化react-intl的使用的文章就介紹到這了,更多相關react 國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • React HOC高階組件深入講解

    React HOC高階組件深入講解

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React 高階組件HOC使用小結,一起看看吧
    2022-10-10
  • 解決webpack -p壓縮打包react報語法錯誤的方法

    解決webpack -p壓縮打包react報語法錯誤的方法

    這篇文章主要給大家介紹了關于解決webpack -p壓縮打包react報語法錯誤的方法,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • React使用Electron開發(fā)桌面端的詳細流程步驟

    React使用Electron開發(fā)桌面端的詳細流程步驟

    React是一個流行的JavaScript庫,用于構建Web應用程序,結合Electron框架,可以輕松地將React應用程序打包為桌面應用程序,本文詳細介紹了使用React和Electron開發(fā)桌面應用程序的步驟,需要的朋友可以參考下
    2023-06-06
  • 使用react-native-doc-viewer實現(xiàn)文檔預覽

    使用react-native-doc-viewer實現(xiàn)文檔預覽

    這篇文章主要介紹了使用react-native-doc-viewer實現(xiàn)文檔預覽,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React使用PropTypes實現(xiàn)類型檢查功能

    React使用PropTypes實現(xiàn)類型檢查功能

    這篇文章主要介紹了React高級指引中使用PropTypes實現(xiàn)類型檢查功能的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧
    2023-02-02
  • React如何通過@craco/craco代理接口

    React如何通過@craco/craco代理接口

    這篇文章主要介紹了React如何通過@craco/craco代理接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React實現(xiàn)合成事件的源碼分析

    React實現(xiàn)合成事件的源碼分析

    React?中的事件,是對原生事件的封裝,叫做合成事件。抽象出一層合成事件,是為了做兼容,抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度,帶大家解讀下源碼,感興趣的可以了解一下
    2022-12-12
  • 如何深入理解React的ref 屬性

    如何深入理解React的ref 屬性

    關于 Refs ,React 官網(wǎng)講解的對于新手來說不太友好,還是自己一字一句解讀后并以代碼驗證的方式后真正理解的.
    2021-05-05
  • react PropTypes校驗傳遞的值操作示例

    react PropTypes校驗傳遞的值操作示例

    這篇文章主要介紹了react PropTypes校驗傳遞的值操作,結合實例形式分析了react PropTypes針對傳遞的值進行校驗操作相關實現(xiàn)技巧,需要的朋友可以參考下
    2020-04-04
  • React-Route6實現(xiàn)keep-alive效果

    React-Route6實現(xiàn)keep-alive效果

    本文主要介紹了React-Route6實現(xiàn)keep-alive效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧<BR>
    2022-06-06

最新評論