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使用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)文檔預覽,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React使用PropTypes實現(xiàn)類型檢查功能
這篇文章主要介紹了React高級指引中使用PropTypes實現(xiàn)類型檢查功能的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2023-02-02React-Route6實現(xiàn)keep-alive效果
本文主要介紹了React-Route6實現(xiàn)keep-alive效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧<BR>2022-06-06