react怎麼實現國際化？react-intl外掛提供了一套實現react國際化的方法，具體實現如下~~

一 搭建react環境和下載相應外掛

預設你已經安裝了nodejs 如果沒有裝的百度裝下 這裡不再細講

利用react官方腳手架搭建react專案，已經存在有的react專案也可忽略搭建這步；然後下載相關依賴 react-intl

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

等待下載完成

找到專案根目錄下的src資料夾 在裡面新建一個叫locale的資料夾 存放語言包設定的檔案；這裡只實現中英文切換，後續其他語言的都是一樣的操作

二 寫相關的配置檔案

找到locale的intl.js檔案 引入相關的外掛 進行封裝暴露出去

import React,{ useContext } from 'react'
import { IntlProvider } from 'react-intl' // 包裹在需要語言國際化的元件的最外層，和react-redux的Provider一樣 讓元件和元件內的子元件都能使用react-intl提供的api和方法
import { mainContext } from '../reducer' // 這裡使用的是useReducer 簡單的在根目錄下建立一個 來控制語言的全域性狀態維護
import zh_CN from './cn' // 中文包
import en_US from './en' // 英文包

const Inter = (props) => {
    // 獲取預設的語言設定 也可以配合一些全域性狀態管理進行結合使用 如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 實現多語言
  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.crhttp://www.cppcns.com
 
eateContext()

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>
        <ViEajXvpFiPew />
      </Inter>
    </ContextProvider>
  );
}
export default App;

四 新建views目錄下面使用相關的外掛和api實現國際化

views新建一個 index.jsx 檔案試試效果

import react,{ useContext} from 'react'
import { mainContext } from '../reducer'
import { FormattedMessage } from 'react-intl程式設計客棧'
 
function Index() {
    const { dispatch,state } = useCo程式設計客棧ntext(mainContext)
    const { locale } = state
    const changeLang = () => { // 改變狀態裡的 語言 進行切換
        dispatch({
            type: 'CHANGE_LOCALE',locale: locale === 'zh' ? 'en' : 'zh'
        })
    }
    return (
        <div>
           <div>
            <FormattedMessage id="start" ></FormattedMessage>
           </div>
         EajXvpFiP  <div>
                <button onClick={changeLang} > <FormattedMessage id="switch" ></FormattedMessage></button>
           </div>
        </div>
    );
}
export default Index;

最終目錄 紅框為新增

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

到此這篇關於react國際化react-intl的使用的文章就介紹到這了,更多相關react 國際化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！