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

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

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

查看我的语言内容json文件

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

2.转换的语言

3.使用

4.看我的代码


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

react中多语言切换的实现方式的更多相关文章
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- 关于在静态html中实现语言切换的思路与实现
在项目中只用到了三种语言:英文.中文简体.中文繁体.所以我首先想到了最笨的方法:1.直接将三种语言写在html中,显示当前设置的语言隐藏其它两种来实现.2.使用css伪元素的content:attr( ...
- React中创建组件的3种方式
目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...
- React中组件通信的几种方式
https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...
- react-redux --》react中 最好用的状态管理方式
一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...
- Android app应用多语言切换功能实现
最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果 和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...
- react项目实现多语言切换
网站的语言切换功能大家都见过不少,一般都是一个下拉框选择语言,如果让我们想一下怎么实现这个功能,我相信大家都是有哥大概思路,一个语言切换的select,将当前的选择的语言存在全局,根据这个语言的key ...
- 在SOUI中使用动态多语言切换
动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
随机推荐
- Centos下分布式跟踪工具Pinpoint的完整部署记录
一.Pinpoint简单介绍Pinpoint是一款对Java编写的大规模分布式系统的APM工具,有些人也喜欢称呼这类工具为调用链系统.分布式跟踪系统.一般来说,前端向后台发起一个查询请求,后台服务可能 ...
- squid代理http和https方式上网的操作记录
需求说明:公司IDC机房有一台服务器A,只有内网环境:192.168.1.150现在需要让这台服务器能对外访问,能正常访问http和https请求(即80端口和443端口)操作思路:在IDC机房里另找 ...
- 思甜雅---关于qq的NABCD的模型分析
个人连接:http://www.cnblogs.com/xiaoliulang/ 关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是 ...
- ABP编译必须添加对程序集“netstandard, Version=2.0.0.0错误
当前使用ABP版本为:4.6.0 升级vs2017到15.4版本,升级framework到4.7版本 如果Core版本请升级到net core 2
- 在VS2017上对C++项目进行单元测试
操作系统:win10 VS2017安装:http://www.cnblogs.com/Metak/p/7471671.html 参考博客: http://blog.csdn.net/lovehaiho ...
- PAT 1012 数字分类
https://pintia.cn/problem-sets/994805260223102976/problems/994805311146147840 给定一系列正整数,请按要求对数字进行分类,并 ...
- laravel 在nginx服务器上除了首页其余都是404的问题
nginx对应站点的.conf配置文件添加如下代码 location / { try_files $uri $uri/ /index.php$is_args$query_string; #语法: tr ...
- 电梯间的谈话:3分钟快速回答CEO的问题
想象一下,你在电梯里遇见了公司的CEO,他让你用3分钟来解释聚焦答案模式这个深奥的术语到底是什么意思.你可以这么说—— 为奠定一个正确的基调,让他酝酿好情绪听你说接下来的话,你可以这样开头: “总裁, ...
- 基于C#.NET的高端智能化网络爬虫(一)(反爬虫哥必看)
前两天朋友发给我了一篇文章,是携程网反爬虫组的技术经理写的,大概讲的是如何用他的超高智商通过(挑衅.怜悯.嘲讽.猥琐)的方式来完美碾压爬虫开发者.今天我就先带大家开发一个最简单低端的爬虫,突破携程网超 ...
- poj 2762(强连通分量+拓扑排序)
题目链接:http://poj.org/problem?id=2762 题意:给出一个有向图,判断任意的两个顶点(u,v)能否从u到达v,或v到达u,即单连通,输出Yes或No. 分析:对于同一个强连 ...