用i18next使你的应用国际化-React

news2024/9/29 15:26:30

ref: https://www.i18next.com/

i18next是一个用JavaScript编写的国际化框架。

i18next为您提供了一个完整的解决方案，本地化您的产品从web端到移动端和桌面端。

在react项目中安i18next依赖：

  • i18next
  • react-i18next
  • i18next-browser-languagedetector，用于检测用户语言
npm install i18next react-i18next i18next-browser-languagedetector

创建i18n.js文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector) // 检测用户语言
  .use(initReactI18next) // 将i18n实例传递给react-i18next
  .init({ // 初始化 i18next
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React已经转义了
    },
    resources: {
      en: {
        translation: {
          // 此处放置翻译内容
          description: {
            part1: 'Edit <1>src/App.js</1> and save to reload.',
            part2: 'Learn React'
          }
        }
      },
      de: {
        translation: {
          description: {
            part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',
            part2: 'Lerne React'
          }
        }
      }
    }
  });

export default i18n;

在index.js中导入i18n.js：

React>=18.0.0的版本：

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

// 导入 i18n (需要绑定)
import './i18n';

const root = createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

更早的版本：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// 导入 i18n (需要绑定)
import './i18n';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

使用：在第一个文本中使用了Trans组件，在第二个文本中使用了useTranslation (hook) :

// App.js
import logo from './logo.svg';
import './App.css';
import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <Trans i18nKey="description.part1">
            Edit <code>src/App.js</code> and save to reload.
          </Trans>
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('description.part2')}
        </a>
      </header>
    </div>
  );
}

export default App;

语言切换器

// App.jsx
...

const lngs = {
  en: { nativeName: 'English' },
  de: { nativeName: 'Deutsch' }
};

function App() {
...
    <img src={logo} className="App-logo" alt="logo" />
    <div>
      {Object.keys(lngs).map((lng) => (
        <button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => i18n.changeLanguage(lng)}>
          {lngs[lng].nativeName}
        </button>
      ))}
    </div>
    <p>
      <Trans i18nKey="description.part1">
        Edit <code>src/App.js</code> and save to reload.
      </Trans>
    </p>
...
}

react language switcher

自i18next v21以来，i18next. resolvedlanguage被设置为当前解析的语言，并且可以用作主要使用的语言，上例中有使用。

i18next.language vs. i18next.languages
i18next.language;
// 设置为当前检测或设置的语言

i18next.languages;
// 设置为将用于查找翻译值的语言代码数组
// 设置语言后，将使用新的语言代码填充此数组
// 除非被覆盖，否则将使用该代码的不太特定的版本填充此数组，以用于回退目的，然后是回退语言列表

// 初始化回退语言
i18next.init({
    fallbackLng: ["es", "fr", "en-US", "dev"]
});
// 改变语言
i18next.changeLanguage("en-US-xx");
// 新语言和它的更一般的形式，然后是回退
i18next.languages; // ["en-US-xx", "en-US", "en", "es", "fr", "dev"]
// 再次改变语言
i18next.changeLanguage("de-DE");
// 不保留上一次设置的语言
i18next.languages; // ["de-DE", "de", "es", "fr", "en-US", "dev"]

处理复数和插值

示例：计算语言变化的次数

// App.js
...
import { useState } from 'react';

...

function App() {
  ...
  const [count, setCounter] = useState(0);

  return (
    ...
        <div>
          {Object.keys(lngs).map((lng) => (
            <button key={lng} style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} type="submit" onClick={() => {
              i18n.changeLanguage(lng);
              setCounter(count + 1);
            }}>
              {lngs[lng].nativeName}
            </button>
          ))}
        </div>
        <p>
          <i>{t('counter', { count })}</i>
        </p>
   ...
  );
}

export default App;

拓展翻译源：

// i18n.js
...

...
    resources: {
      en: {
        translation: {
          description: {
            part1: 'Edit <1>src/App.js</1> and save to reload.',
            part2: 'Learn React'
          },
          counter_one: 'Changed language just once',
          counter_other: 'Changed language already {{count}} times'
        }
      },
      de: {
        translation: {
          description: {
            part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',
            part2: 'Lerne React'
          },
          counter_one: 'Die Sprache wurde erst ein mal gewechselt',
          counter_other: 'Die Sprache wurde {{count}} mal gewechselt'
        }
      }
    }

...

i18next会根据count数值选择正确的复数格式，了解更多 - Plurals

react pluralization

处理多种复数：

// 翻译源:
{
  "key_zero": "zero",
  "key_one": "singular",
  "key_two": "two",
  "key_few": "few",
  "key_many": "many",
  "key_other": "other"
}

// 使用:
t('key', {count: 0}); // -> "zero"
t('key', {count: 1}); // -> "singular"
t('key', {count: 2}); // -> "two"
t('key', {count: 3}); // -> "few"
t('key', {count: 4}); // -> "few"
t('key', {count: 5}); // -> "few"
t('key', {count: 11}); // -> "many"
t('key', {count: 99}); // -> "many"
t('key', {count: 100}); // -> "other"

这些复数是用Intl API简化的。你可能需要Polyfill Intl.PluralRules的API，如果它不可用，它将退回到i18next JSON格式v3复数处理。

注：变量名必须是count并且必须存在：i18next.t('key', {count: 1});

polyfill： 只需导入它以确保Intl.PluralRules在您的环境中可用:

npm install intl-pluralrules

import 'intl-pluralrules'

如果Intl.PluralRules已经存在，包含一个selectRange()方法，并且支持多种语言环境，那么将不会加载polyfill。

格式化

在i18next和Luxon的帮助下使用不同的日期格式来处理日期和时间。

npm install luxon

创建一个Footer组件并在App.js中引用：

import './Footer.css';

const Footer = ({ t }) => (
  <div className="Footer">
    <div>{t('footer.date', { date: new Date() })}</div>
  </div>
);

export default Footer;

// 在App.js中引入并这样使用
// <Footer t={t} />

导入luxon并定义一个格式函数，如文档中所述，并添加新的翻译key:

...
import { DateTime } from 'luxon';

...
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
      // format: (value, format, lng) => { // 遗留使用方法
      //   if (value instanceof Date) {
      //     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
      //   }
      //   return value;
      // }
    },
    resources: {
      en: {
        translation: {
          ...
          footer: {
            date: 'Today is {{date, DATE_HUGE}}'
          }
        }
      },
      de: {
        translation: {
          ...
          footer: {
            date: 'Heute ist {{date, DATE_HUGE}}'
          }
        }
      }
    }
  });

// 新的使用方法
i18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {
  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});

export default i18n;

English：

react english

German：

react german

Context

基于当前时间的特定问候信息，即早上、晚上等。

创建一个getGreetingTime函数，并使用结果作为页脚翻译的内容:

// Footer.jsx
import { DateTime } from 'luxon';
import './Footer.css';

const getGreetingTime = (d = DateTime.now()) => {
	const split_afternoon = 12; // 24小时制分配下午
	const split_evening = 17; // 24小时制分配晚上
	const currentHour = parseFloat(d.toFormat('hh'));

	if (currentHour >= split_afternoon && currentHour <= split_evening) {
		return 'afternoon';
	} else if (currentHour >= split_evening) {
		return 'evening';
  }
	return 'morning';
}

const Footer = ({ t }) => (
  <div className="Footer">
    <div>{t('footer.date', { date: new Date(), context: getGreetingTime() })}</div>
  </div>
);

export default Footer;

添加i18next-http-backend插件（从服务器加载翻译）和翻译key:

npm install i18next-http-backend

...
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    ...
    resources: {
      en: {
        translation: {
          ...
          footer: {
            date: 'Today is {{date, DATE_HUGE}}',
            date_morning: 'Good morning! Today is {{date, DATE_HUGE}} | Have a nice day!',
            date_afternoon: 'Good afternoon! It\'s {{date, DATE_HUGE}}',
            date_evening: 'Good evening! Today was the {{date, DATE_HUGE}}'
          }
        }
      },
      de: {
        translation: {
          ...
          footer: {
            date: 'Heute ist {{date, DATE_HUGE}}',
            date_morning: 'Guten Morgen! Heute ist {{date, DATE_HUGE}} | Wünsche einen schönen Tag!',
            date_afternoon: 'Guten Tag! Es ist {{date, DATE_HUGE}}',
            date_evening: 'Guten Abend! Heute war {{date, DATE_HUGE}}'
          }
        }
      }
    }
  });

...

效果：

react translations

分离翻译和代码

在i18next-http-backend的帮助下将翻译从代码中分离出来，并将它们放在专用的json文件中。

将翻译文件移动到public文件夹：

public locales

移除翻译代码：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import { DateTime } from 'luxon';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
      // format: (value, format, lng) => {
      //   if (value instanceof Date) {
      //     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
      //   }
      //   return value;
      // }
    }
  });

i18n.services.formatter.add('DATE_HUGE', (value, lng, options) => {
  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});

export default i18n;

现在翻译是异步加载的啦，所以用一个Subspense组件包装你的应用来确保你防止以下错误:

Uncaught Error: App suspended while rendering, but no fallback UI was specified.

// App.jsx
import { Suspense } from 'react';

function App() {
  ...
}

// 在这里，app从页面捕获suspense，以防翻译未加载完成
export default function WrappedApp() {
  return (
    <Suspense fallback="...is loading">
      <App />
    </Suspense>
  );
}

如果你想支持一种新的语言，你只需要创建一个新的文件夹和一个新的翻译json文件。这使您可以直接将翻译json发送给一些专业的翻译人员。或者，如果您正在使用翻译管理系统，您可以使用cli同步文件。

具体代码可在这里查看。

多个namespaces

将翻译拆分为多个文件，使用：在调用useTranslation时指定它

const { t } = useTranslation(['translation', 'common']);
// ...
// t('look.deep', { ns: 'common' })

[withTranslation](withTranslation (HOC) - react-i18next documentation)：

withTranslation(['translation', 'common'])(MyComponent);
// ...
// t('look.deep', { ns: 'common' })

[Translation](Translation (render prop) - react-i18next documentation)：

<Translation ns={['translation', 'common']}>
{
  (t) => <p>{t('look.deep', { ns: 'common' })}</p>
}
</Translation>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/789316.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

详细介绍如何使用 PyTorch 和 Lightning 增强医学多标签(人类蛋白质)图像分类-附源码

详细介绍如何使用 PyTorch 和 Lightning 增强医学多标签(人类蛋白质)图像分类-附源码

文末提供免费的原代码下载链接 在医疗诊断这一关键领域，快速、准确的图像分类在帮助医疗保健专业人员的决策中发挥着至关重要的作用。深度学习的出现，加上 PyTorch 等强大的框架，使得应用前沿模型来处理复杂的任务（例如医学多标签图像分类）成为可能。在本次演示中，我们将…
阅读更多...
最新基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法

最新基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法

文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff0c;可直观的展示主题的研究发展历程、研究现状、研究…
阅读更多...
logback-spring.xml日志配置文件详解

logback-spring.xml日志配置文件详解

目录 前言logback-spring.xml 配置 前言 打印日志是一个系统的基本功能&#xff0c;系统出现异常可以通过查找日志弄清楚是什么原因&#xff0c;从而更加快速地定位问题&#xff0c;修复系统。 logback-spring.xml 配置 文件位置 具体配置 <?xml version"1.0"…
阅读更多...
Vlan端口隔离(第二十四课)

Vlan端口隔离(第二十四课)

一、端口隔离 1、端口隔离技术概述 1）端口隔离技术出现背景：为了实现报文之间的二层隔离，可以将不同的端口加入不同的VLAN，但这样会浪费有限的VLAN ID资源。 2）端口隔离的作用：采用端口隔离功能，可以实现同一VLAN内端口之间的隔离。 3）如何实现端口隔离功能：只需要…
阅读更多...
Windows如何安装Django及如何创建项目

Windows如何安装Django及如何创建项目

目录 1、Windows安装Django--pip命令行 2、创建项目 2.1、终端创建项目 2.2、在Pycharm中创建项目 2.3、二者创建的项目有何不同 2.4、项目目录说明 1、Windows安装Django--pip命令行 安装Django有两种方式&#xff1a; pip命令行【推荐--简单】手动安装【稍微复杂一丢丢…
阅读更多...
【ruby on rails】M1遇到的一些安装问题

【ruby on rails】M1遇到的一些安装问题

1. homebrew位置变了 原来的Cellar Homebrew Caskroom 都是在 /usr/local/下面 M1在/opt/homebrew下面 2. 装ruby M1电脑安装ruby&#xff0c;装不上的问题 RUBY_CFLAGS"-w" rbenv install 2.7.43. 装puma报错 gem install puma -v 5.5.2 -- --with-openssl-dir…
阅读更多...
AtcoderABC311场

AtcoderABC311场

A - First ABCA - First ABC 题目大意 需要找到满足条件的最小字符数量。条件是字符串S中出现了A、B和C各至少一次。 思路分析 可以使用一个unordered_set来存储已经出现的字符&#xff0c;每次遍历字符串S时&#xff0c;将字符加入集合中。当集合中的元素数量达到3时&#…
阅读更多...
Python元祖及字典小练习

Python元祖及字典小练习

目录 1. 元组 2. 字典 资料获取方法 1. 元组 和list的区别&#xff0c;不能改变元组中的对象&#xff0c;对象里面的值可以修改 元组中包含容器类&#xff08;列表&#xff0c;字典等&#xff09; 如果直接&#xff08;&#xff09;是数学运算&#xff0c; 如果&#xf…
阅读更多...
爬虫002_python程序的终端运行_文件运行_ipython的使用---python工作笔记020

爬虫002_python程序的终端运行_文件运行_ipython的使用---python工作笔记020

用python运行一个文件,就是要写一个.py结尾的文件 然后保存 然后直接cmd中,python 然后写上py文件的路径就可以了 然后看一下内容 看一下终端中运行,直接输入python进入python环境,然后写python代码 回车运行 退出可以用exit()
阅读更多...
LiveGBS流媒体平台GB/T28181功能-视频直播流媒体平台分屏展示设备树分组树记录上次分屏播放记录

LiveGBS流媒体平台GB/T28181功能-视频直播流媒体平台分屏展示设备树分组树记录上次分屏播放记录

LiveGBS视频直播流媒体平台分屏展示设备树分组树记录上次分屏播放记录 1、分屏展示1.1、单屏1.2、四分屏1.3、九分屏1.4、十六分屏 2、分屏记录3、搭建GB28181视频直播平台 1、分屏展示 LiveGBS分屏页面支持&#xff0c;多画面播放&#xff0c;支持单屏、四分屏、九分屏、十六…
阅读更多...
【无标题】机器学习常识阅读笔记

【无标题】机器学习常识阅读笔记

原博客链接&#xff1a;https://blog.csdn.net/minfanphd/category_12328466.html 总共24篇博客内容&#xff0c;最近两天集种看了一遍。小有收获&#xff0c;了解了一些机器学习的概念。大部分概念原来听过&#xff0c;但是有些概念还是第一次见。比如U-Net&#xff0c;多示例…
阅读更多...
使用IDEA打jar包的详细图文教程

使用IDEA打jar包的详细图文教程

1. 点击intellij idea左上角的“File”菜单 -> Project Structure 2. 点击"Artifacts" -> 绿色的"" -> “JAR” -> Empty 3. Name栏填入自定义的名字&#xff0c;Output ditectory 选择 jar 包目标目录&#xff0c;Available Elements 里右击…
阅读更多...
vue中预览静态pdf文件

vue中预览静态pdf文件

方法 // pdf预览 viewFileCompare() { const pdfUrl "/static/wjbd.pdf"; window.open(pdfUrl); }, // 下载 downloadFile(){ var a document.createElement("a"); a.href "/static/wjbd.pdf"; a.…
阅读更多...
王道考研数据结构第二章知识点总结

王道考研数据结构第二章知识点总结

2.1 线性表的定义和基本操作 2.2.1 顺序表的定义 2.2.1 顺序表的插入删除 注意&#xff1a;插入操作中插入一个元素是从后往前移(从最后一个开始处理)&#xff1b;而删除操作中是从前往后移(从需要删除的后一个开始移)。 2.2.2 顺序表的查找 2.3.1 单链表的定义 2.3.2-1 单链…
阅读更多...
CCLINK转profinet网关cclink转modbus

CCLINK转profinet网关cclink转modbus

在工业自动化领域&#xff0c;不同品牌的PLC控制系统之间的数据交互是一个重要的问题。比如说&#xff0c;如果我们需要将三菱PLC的数据和西门子PLC的数据进行交互&#xff0c;我们应该如何处理呢&#xff1f;在这方面&#xff0c;捷米的JM-PN-CCLK通讯网关为我们提供了一种解决…
阅读更多...
Python中的Cookie模块有什么功能

Python中的Cookie模块有什么功能

什么是Cookie Cookie&#xff08;或HTTP Cookie&#xff09;是一小段由Web服务器发送到Web浏览器并保存在用户本地计算机上的数据。它通常用于跟踪和识别用户的会话信息&#xff0c;以提供个性化的用户体验。 Cookie的工作原理 1. 当用户访问一个网站时&#xff0c;服务器会生…
阅读更多...
在docker中安装使用达梦数据库

在docker中安装使用达梦数据库

关于在docker中安装达梦数据库&#xff0c;达梦官方网站其实是有提供安装使用方法的&#xff0c;但可能还是有朋友不会&#xff0c;这里将在原文基础上简单扩充下。 注意&#xff1a;docker容器中&#xff0c;数据库安装后没有创建服务的脚本&#xff0c;只有bin、bin2、conf、…
阅读更多...
VMWare虚拟机常用操作命令

VMWare虚拟机常用操作命令

今日一语&#xff1a;做到所有的细节都不放过&#xff0c;则可以避免99%已知的风险&#xff0c;但大多数都因懒惰而甘愿承受风险&#xff0c;至此悔不当初 查看虚拟机在本机网络的IP ip addr 本地向虚拟机传送文件 scp 文件 rootpath 虚拟机路径 enter后输入密码即可传输&am…
阅读更多...
LoRA：大模型下游任务的低秩适应

LoRA：大模型下游任务的低秩适应

论文标题&#xff1a;LoRA: Low-Rank Adaptation of Large Language Models 论文链接&#xff1a;https://arxiv.org/abs/2106.09685 论文来源&#xff1a;NVIDIA 一、概述 自然语言处理中的一个重要范式是在通用域数据上进行大规模预训练&#xff0c;然后在特定任务或域上适配…
阅读更多...
开发一个RISC-V上的操作系统（二）—— 系统引导程序（Bootloader）

开发一个RISC-V上的操作系统（二）—— 系统引导程序（Bootloader）

目录 文章传送门 一、什么是Bootloader 二、简单的启动程序 三、上板测试 文章传送门 开发一个RISC-V上的操作系统&#xff08;一&#xff09;—— 环境搭建_riscv开发环境_Patarw_Li的博客-CSDN博客 开发一个RISC-V上的操作系统&#xff08;二&#xff09;—— 系统引导…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023