i18next - 應用自定義格式

Question

我有 2 個命名空間：

• 第一個是全球性的，包含與業務相關的詞匯表
• 第二個范圍是特定頁面

// global ns
{
  "amendment": "amendment"
}

// page ns
{
  "action": "Enter your $t(global:amendment) below."
}

我在反應組件中的用例：

import React from 'react'
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('amendment')}</h1>
      <p>{t('action')}</p>
    </div>
  )
}

---

我想使用大寫轉換來格式化包含在我的h1元素中的文本。
實現這一目標的最佳方法是什么？

我已經考慮使用上下文並執行以下操作：

// global ns
{
  "amendment": "amendment",
  "amendment_uppercase": "Amendment"
}

import React from 'react'
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('amendment', {context: 'uppercase'})}</h1>
      <p>{t('action')}</p>
    </div>
  )
}

這里的問題是我必須復制我所有的翻譯鍵，而且我有很多全局詞匯表。

Answer 1

我會應用t方法結果的格式。

就像是：

import React from 'react'
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('amendment').toUpperCase()}</h1>
      <p>{t('action')}</p>
    </div>
  )
}