返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在 React 中使用 i18next的示例
  • 482
分享到

在 React 中使用 i18next的示例

React 使用 i18nextReact  i18next 2023-01-06 15:01:44 482人浏览 薄情痞子
摘要

目录1. 安装依赖2. 在src下创建i18n文件夹2.1 common下的zh-CN.js2.2 common下的en-US.js2.3 在common的index.js文件中引入

1. 安装依赖

npm i i18next React-i18next i18next-browser-languagedetector
  • i18next 提供了翻译的基本能力。
  • react-i18next 是 i18next 的一个插件,用来降低 react 的使用成本。
  • i18next-browser-languagedetector 是用来检测浏览器语言的插件。

2. 在src下创建i18n文件夹

!

2.1 common下的zh-CN.js

{
  "common": {
    "personSetting": "个人设置",
    "modifyPassWord": "修改密码",
    "currentTime": '当前时间是 {{time}}',
  }
}

2.2 common下的en-US.js

{
  "common": {
    "personSetting": "Personal settings",
    "modifyPassword": "change Password",
    "currentTime": 'Current time is {{time}}',
  }
}

2.3 在common的index.js文件中引入

import en_common from './en-US/translation.JSON'
import zh_common from './zh-CN/translation.json'

export const lanGCommon = { en_common, zh_common }

2.4 在resources.js中引入common模块的翻译

import { langCommon } from './locales/common' //公共需要翻译的内容
// 把所有的翻译资源集合
const resources = {
  en: {
    translation: {
      ...langCommon.en_common
    },
  },
  zh: {
    translation: {
      ...langCommon.zh_common
    },
  }
}
export { resources }

2.5 utils下初始化语言的方法

export function initLangage() {
  let lang = localStorage.getItem('language') || navigator.language // 获取浏览器的语言环境,兼容IE的写法
  if (lang) {
    lang = lang.substr(0, 2).toLowerCase() // 截取前两位字符,并转化为小写
    return lang
  } else {
    return 'en'
  }
}

2.6 i18n.js代码如下

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector';
import { resources } from '@/i18n/resources'
import { initLangage } from '@/utils'

i18n
  // 检测用户当前使用的语言
  // 文档: https://GitHub.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // 注入 react-i18next 实例
  .use(initReactI18next)
  // 初始化 i18next
  // 配置参数的文档: Https://www.i18next.com/overview/configuration-options
  .init({
    resources, //资源初始化
    lng: initLangage(),
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    react: {
      useSuspense: false, // this will do the magic
    },
    debug: false,
  })
export default i18n

3. 在app.tsx中引入

import './i18n/i18n'

4. 页面中使用

import { useTranslation } from 'react-i18next';

const SafetyManage: React.FC = (): React.ReactElement => {
  const { t } = useTranslation();
  return (
    <div >
      <Button
         type="primary"
       >
         {t('common.personnalSetting')}
       </Button>,
       <Button
       >
         {t('common.modifyPassword')}
       </Button>,
       <p>
		  {t('common.currentTime', { time: dayjs().fORMat('MM/DD/YYYY') })}
		</p>
    </div>
  );
}

export default App;

useTranslation 返回的对象包含一个 t 方法,这个方法可以翻译文本。
i18next 提供了插值的用法: 在 t 函数中传递第二个参数,它是一个对象。

在这里插入图片描述

在这里插入图片描述

参考文章:https://www.zadmei.com/qdizjsjz.html

到此这篇关于在 React 中使用 i18next的文章就介绍到这了,更多相关React 使用 i18next内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 在 React 中使用 i18next的示例

本文链接: https://www.lsjlt.com/news/177009.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 在 React 中使用 i18next的示例
    目录1. 安装依赖2. 在src下创建i18n文件夹2.1 common下的zh-CN.js2.2 common下的en-US.js2.3 在common的index.js文件中引入...
    99+
    2023-01-06
    React 使用 i18next React  i18next
  • React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)
    目录简介安装与使用安装准备新建一个 React 项目,安装依赖包;使用检测当前浏览器语言国际化组件手动切换国际化语言总结本文使用 React-i18next 库结合 React, 介...
    99+
    2023-01-06
    React 使用 react-i18next 国际化 react i18next 国际化 react-i18next
  • React中classnames库使用示例
    目录classnames的引入引入使用 Node.js, Browserify, or webpack:classnames函数的使用数组的形式ES6中使用动态类名结合React一起...
    99+
    2022-11-13
    React classnames库 React classnames
  • React Hook的使用示例
    目录一个简单的组件案例 更复杂的父子组件案例 如何写onSelectReact.ChildrenReact.cloneElement父组件数据如何传递给子组件index数据...
    99+
    2024-04-02
  • React ref的使用示例
    目录什么是 ref 如何使用 ref 放在 dom 元素上放在类组件上 放在函数组件上 总结 写了一段时间的 react,99%都在写 state、prop、useState、use...
    99+
    2024-04-02
  • GraphQL在react中的应用示例详解
    目录什么是 GraphQLGraphQL出现的意义传统API存在的主要问题:GraphQL 如何解决问题GraphQL基本语法标量类型对象类型枚举类型GraphQL 内置指令什么是 ...
    99+
    2022-11-13
    GraphQL在react应用 GraphQL react
  • React中的ref属性的使用示例详解
    目录ref 简介1. 字符串形式的ref2. create形式的ref3. 回调函数形式的ref总结:ref 简介 React提供的这个ref属性,表示为对组件真正实例的引用,其实就...
    99+
    2023-05-17
    React ref属性使用 React ref属性
  • react中使用antd及immutable示例详解
    目录一、react中使用antd组件库二、Immutable2.1 深拷贝和浅拷贝的关系2.2 immutable优化性能方式2.3 immutable的Map使用2.4 immut...
    99+
    2022-11-13
    react使用antd immutable react antd react immutable
  • react使用useImperativeHandle示例详解
    目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef:获取组件内部元素3.2 forwardRef:父组件获取子组件内部的一个元素3....
    99+
    2024-04-02
  • React使用高德地图的实现示例(react-amap)
    pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/rea...
    99+
    2024-04-02
  • 在java中binarySearch的使用示例
    小编给大家分享一下在java中binarySearch的使用示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!常用的java框架有哪些1.SpringMVC,Sp...
    99+
    2023-06-14
  • React 路由使用示例详解
    目录Router简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为useNavigate参考资料Router react-router-dom是一个处理页面跳转的...
    99+
    2024-04-02
  • sass在react中的基本使用(实例详解)
    目录1. 安装sass2. 编写App.tsx中的基本DOM3. sass变量4. sass中的选择器嵌套和属性嵌套5. sass中的@import和Partials6. Sass中...
    99+
    2024-04-02
  • 示例详解react中useState的用法
    useState useState 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。useState 会返回一对值:当前状态...
    99+
    2024-04-02
  • react如何在React html中使用
    本篇文章为大家展示了react如何在React html中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基本使用<!DOCTYPE html><html l...
    99+
    2023-06-14
  • React中ref的示例分析
    这篇文章给大家分享的是有关React中ref的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的...
    99+
    2024-04-02
  • java中reduce在流的使用示例
    这篇文章主要介绍了java中reduce在流的使用示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Java是什么Java是一门面向对象编程语言,可以编写桌面应用程序、Web...
    99+
    2023-06-14
  • 在 gin 中使用 go-assets 的示例
    有志者,事竟成!如果你在学习Golang,那么本文《在 gin 中使用 go-assets 的示例》,就很适合你!文章讲解的知识点主要包括,若是你对本文感兴趣,或者是想搞懂其中某个知识点,就请你继续...
    99+
    2024-04-04
  • React中JSX与react事件的示例分析
    小编给大家分享一下React中JSX与react事件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、JSX1.1、表...
    99+
    2024-04-02
  • react组件memouseMemouseCallback使用区别示例
    目录正文memo使用useMemo使用useCallback使用正文 memo用来优化函数组件的重复渲染行为,针对的是一个组件 useMemo返回一个memoized的值 本质都是用...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作