i18next 国际化（i18n）相关使用收录

最新推荐文章于 2025-12-01 15:11:16 发布

原创最新推荐文章于 2025-12-01 15:11:16 发布 · 319 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

i18next 国际化（i18n）相关使用收录

常见的框架使用方案

i18next
React
vue
Next.js

react-i18next 相关使用场景

复杂情况国际化翻译解决

当前余额已欠费 <xxx> 充值</xxx> 后使用

The current balance is in arrears. <xxx> recharge </xxx> for use

这种情况的翻译，可以通过使用 react-i18next 提供的，Trans 组件来解决。

import { Trans, useTranslation } from "react-i18next";

// 解构出来的 t 函数，用于翻译
const { t } = useTranslation();

// 原写法
const NoHighButInsufficient = () => {
  return (
    <>
      <div>
        可用点券不足，请
        <Button type="link" onClick={() => goto("/user/coupon/activity")}>
          获取更多点券
        </Button>或<Button type="link" onClick={openUpdateModal}>
          免费升级账号
        </Button>
        后点击
        <Button type="link" onClick={handleRefresh}>
          刷新
        </Button>
        使用。
      </div>
    </>
  );
};

// 使用 Trans 组件包裹
const NoHighButInsufficient = () => {
  return (
    <>
      <div>
        <Trans
          i18nKey="insufficient_voucher_tip"
          components={{
            getVoucher: (
              <Button
                type="link"
                onClick={() => goto("/user/coupon/activity")}
              />
            ),
            upgrade: <Button type="link" onClick={openUpdateModal} />,
            refresh: <Button type="link" onClick={handleRefresh} />,
          }}
        />
      </div>
    </>
  );
};

translation-zn

    "insufficient_voucher_tip": "可用点券不足，请<getVoucher>获取更多点券</getVoucher>或<upgrade>免费升级账号</upgrade>后点击<refresh>刷新</refresh>使用。",

translation-en

    "insufficient_voucher_tip": "Insufficient vouchers. Please <getVoucher>earn more vouchers</getVoucher> or <upgrade>upgrade your account for free</upgrade> and <refresh>refresh</refresh>.",