react-18next使用

最新推荐文章于 2025-07-10 20:16:53 发布

ezLeo

最新推荐文章于 2025-07-10 20:16:53 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/myiloveuuu/article/details/91364591

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用react-18next进行项目国际化，包括创建和组织国际化文件、初始化配置、使用t函数和Trans组件来处理字符串和组件内容。在实际应用中，特别是在Electron环境下，需要注意多进程间语言切换的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

项目之前没有考虑过国际化相关的事情，但是最近要搞出一个国际化的版本在国外的展会上面展示，于是加紧时间，两个人花了2天时间替换了所有的中文，替换的手都酸了

使用

参考文档：https://react.i18next.com/

例子：https://github.com/bkthrough/react-i18next-demo

1.国际化文件

json文件，每种翻译对应一个文件，内容可以带有变量，组件

例：

en-us.json:

{
  "common": {
    "cancel": "Cancel"
  },
  "join": "join",
  "retry": "Retry after {{timer}}s",
  "choosePerson": "Selected <0>{{num}}</0> person"
}

zh-cn.json:

{
  "common": {
    "cancel": "取消"
  },
  "join": "加入",
  "retry": "{{timer}}秒后重试",
  "choosePerson": "选择人数<0>{{num}}</0>, 没选择人数<1>{{num1}}</1>"
}

变量需要通过{{}}格式包裹，组件需要通过<数字></数字>格式包裹，数字的用处在下面Trans组件中体现。

需要注意的是，组件不能当做变量赋值

2.初始化配置

import i18n from "i18next";
import enUsTrans from "./en-us.json";
import zhCnTrans from "./zh-cn.json";

i18n.init({
  //引入资源文件
  resources: {
      en: {
        translation: enUsTrans,
      },
      zh: {
        translation: zhCnTrans,
      },
    },
  //选择默认语言，选择内容为上述配置中的key，即en/zh
  fallbackLng: "en",
})

3.内容

t函数：应用于内容只有字符串，或带有变量

例:

import i18n from "i18next";
import React, { Component } from "react";

class App extends Component{
    render(){
        return <h1>{i18n.t("common.cancel")}
          <div>{i18n.t("retry", {retry: 3})}</div>
        </h1>
        );
    }
}

Trans组件：应用于内容包含组件，Trans的参数i18nKey为json中定义的key值；values设置变量内容；components设置组件内容，component是一个数组，数组的下标即为定义内容的下标，比如下述div对应0，span对应1

例:

import i18n from "i18next";
import React, { Component } from "react";

class App extends Component{
    render(){
        return <Trans i18nKey={"choosePerson"} values={{num: 3, num1: 4}} components={[<div>content</div>, <span>content</span>]}></Trans>
        );
    }
}