react国际化react-intl的使用


Posted in Javascript onMay 06, 2021

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的文件夹 存放语言包设置的文件;这里只实现中英文切换,后续其他语言的都是一样的操作

react国际化react-intl的使用 

二 写相关的配置文件

找到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.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实现国际化

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 = () => { // 改变状态里的 语言 进行切换
        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国际化react-intl的使用

就这样 一个简单的react国际化就完成了!
可以去试一试,如果项目有需要也可以按照这种移植进去
本次的demo已上传GitHub:github地址 可自行克隆运行

到此这篇关于react国际化react-intl的使用的文章就介绍到这了,更多相关react 国际化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
如何用JavaScript实现一个数组惰性求值库
原生JS中应该禁止出现的写法
May 05 #Javascript
详解Javascript实践中的命令模式
如何制作自己的原生JavaScript路由
May 05 #Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
如何用JavaScript学习算法复杂度
You might like
php的ajax简单实例
2014/02/27 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php计算title标题相似比的方法
2015/07/29 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php设计模式之单例模式代码
2016/06/11 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
答题辅助python代码实现
2018/01/16 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
本科生就业推荐信
2014/05/19 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
故宫英文导游词
2015/01/31 职场文书
让生命充满爱观后感
2015/06/08 职场文书
迎国庆主题班会
2015/08/17 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Python制作春联的示例代码
2022/01/22 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python