如何使用 `react-i18next` 来国际化一段包含 React 组件的文本

本文将展示如何使用 react-i18next 来国际化一段包含 React 组件(如 <Link>)的文本。以下是一个完整的示例,涵盖配置和使用方法:

1. 安装依赖

首先,确保安装了必要的包:

bash 复制代码
npm install i18next react-i18next

2. 配置 i18next

创建一个 i18n.js 文件来初始化 i18next

javascript 复制代码
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 定义多语言资源
const resources = {
  en: {
    translation: {
      welcome: 'Welcome to our <1>website</1>',
    },
  },
  zh: {
    translation: {
      welcome: '欢迎访问我们的<1>网站</1>',
    },
  },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // 默认语言
    interpolation: {
      escapeValue: false, // React 已经处理了 XSS
    },
  });

export default i18n;

3. 在 React 应用中集成

在你的主应用文件中(例如 index.jsApp.js)引入 i18n 配置:

javascript 复制代码
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n'; // 引入 i18n 配置
import App from './App';

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

4. 使用 react-i18next 国际化带组件的文本

在组件中使用 useTranslation 钩子,并结合 <Trans> 组件来处理包含 React 组件的翻译:

javascript 复制代码
// App.js
import React from 'react';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom'; // 假设使用 react-router-dom

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

  // 切换语言的函数
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>React i18next 示例</h1>
      {/* 使用 Trans 组件处理带 React 组件的翻译 */}
      <Trans i18nKey="welcome" components={{ 1: <Link to="/home" /> }}>
        Welcome to our <Link to="/home">website</Link>
      </Trans>

      {/* 语言切换按钮 */}
      <div>
        <button onClick={() => changeLanguage('en')}>English</button>
        <button onClick={() => changeLanguage('zh')}>中文</button>
      </div>
    </div>
  );
}

export default App;

5. 翻译文件结构

确保翻译文件中的占位符(如 <1>)与 <Trans> 组件中的 components 属性对应。components 对象的键(如 1)对应翻译字符串中的 <1>,值是实际的 React 组件(如 <Link>)。

翻译资源示例(已在 i18n.js 中定义):

json 复制代码
{
  "en": {
    "translation": {
      "welcome": "Welcome to our <1>website</1>"
    }
  },
  "zh": {
    "translation": {
      "welcome": "欢迎访问我们的<1>网站</1>"
    }
  }
}

6. 运行效果

  • 当语言为 en 时,页面显示:Welcome to our websitewebsite 是可点击的 <Link>)。
  • 当语言为 zh 时,页面显示:欢迎访问我们的网站网站 是可点击的 <Link>)。
  • 点击语言切换按钮可动态切换语言。
相关推荐
qczg_wxg3 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz4 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码4 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v5 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山5 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin5 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip5 小时前
结合Worker通知应用更新
前端·javascript
叶玳言6 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳6 小时前
HTML 基本结构
前端
Gazer_S6 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js