目前正在进行的项目就是一个多语言切换的项目,有些前情知识我们可以
从https://react.i18next.com/getting-started进行了解。
说到使用方法,当然首先是要$ npm install react-i18next --save,才能够在我们的项目中运用
当然在我们的根目录中需要引入

第一步:先看看运行的效果图

第二步:请先看我的语言转换目录

查看我的语言内容json文件

第三步:我是如何在文件中引用的
1.引入文件

2.转换的语言

3.使用

4.看我的代码


上面的这个其实只是针对的dropdown
那我们针对的要转换的文字是怎么在项目中写的呢?直接是使用函数t进行转换的。

react中多语言切换的实现方式的更多相关文章

  1. react中的ref的3种方式

    2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...

  2. 关于在静态html中实现语言切换的思路与实现

    在项目中只用到了三种语言:英文.中文简体.中文繁体.所以我首先想到了最笨的方法:1.直接将三种语言写在html中,显示当前设置的语言隐藏其它两种来实现.2.使用css伪元素的content:attr( ...

  3. React中创建组件的3种方式

    目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...

  4. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  5. react-redux --》react中 最好用的状态管理方式

    一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...

  6. Android app应用多语言切换功能实现

    最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果 和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...

  7. react项目实现多语言切换

    网站的语言切换功能大家都见过不少,一般都是一个下拉框选择语言,如果让我们想一下怎么实现这个功能,我相信大家都是有哥大概思路,一个语言切换的select,将当前的选择的语言存在全局,根据这个语言的key ...

  8. 在SOUI中使用动态多语言切换

    动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...

  9. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

随机推荐

  1. CAD2020下载安装AutoCAD2020中文版下载地址+安装教程

    AutoCAD2020中文版为目前最新软件版本,我第一时间拿到软件进行安装测试,确保软件正常安装且各项功能正常可以使用,立刻拿出来分享,想用最新版本的话,抓紧下载使用吧: 我把我用的安装包贡献给你下载 ...

  2. 20min 快速着手Markdown

    目录 Markdown介绍和基本使用 初步介绍 markdown的使用场景 为什么是 Markdown markdown的基本语法和使用平台 Q&A: Markdown介绍和基本使用 初步介绍 ...

  3. nginx反向代理中proxy_set_header 运维笔记

    Nginx proxy_set_header:即允许重新定义或添加字段传递给代理服务器的请求头.该值可以包含文本.变量和它们的组合.在没有定义proxy_set_header时会继承之前定义的值.默认 ...

  4. SpringMVC环境搭建——HelloWorld

    1.新建Maven Web 工程: 2.添加相关的依赖包(Spring MVC.tomcat插件等),具体的pom.xml文件如下 <project xmlns="http://mav ...

  5. 第二个spring冲刺第10天(及第二阶段总结)

    第二阶段算是结束了,第二阶段,我们实现了基本的功能,这是软件的开始页面,点击便会进入学习画面,目前学习画面还有待改善   燃尽图3 眨眼就完结了第二阶段的冲刺了,大致整体结构已经完成. 第二阶段总体是 ...

  6. maven配置私服

    1先配置maven的配置文件 2在项目的pom.xml文件增加 <distributionManagement> <repository> <id>nexus-re ...

  7. mybatis分页 -----PageHelper插件

    对查询结果进行分页 一,使用limit进行分页 1.mybatis 的sql语句: <if test="page !=null and rows !=null"> li ...

  8. linux命令学习head和tail

    linux命令head和tail是一对:more和less是一对. head和tail https://www.2cto.com/os/201507/414753.html 一个头,一个尾. tail ...

  9. mysql的group_concat对应oracle的wm_concat

    mysql的group_concat对应oracle的wm_concat http://bey2nd.blog.163.com/blog/static/12063183120124313360964/

  10. sap 最新财报以及云业务转型情况

    SAP第四季度收入超预期 加码云转型启动重组计划 http://soft.zhiding.cn/software_zone/2019/0130/3115457.shtml 尽管第四季度超出收入预期,但 ...