javascript - 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>
  )
}

这里的问题是我必须复制所有的翻译键，而且我有很多全球词汇表。

标签： javascriptinternationalizationi18next

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>
  )
}