返回

gt-next@6.6.0

Ernest McCarter avatarErnest McCarter
gt-next6.6.0词典翻译翻译

概述

在 gt-next 6.6.0 中，我们为“棕地”应用的国际化提供了一种新思路。我们引入了 t.obj() 函数，它可以返回已翻译的字典结构。

动机

“棕地”和“绿地”这两个术语源自房地产开发。绿地 指没有现有建筑的地块，而 棕地 则指已有建筑的地块。在 i18n 领域，这分别对应没有 i18n 基础设施的应用 (绿地) 和已经具备 i18n 基础设施的应用 (棕地) 。

到目前为止，我们的库一直高度聚焦于为“绿地”应用提供国际化能力。<T> 组件和 useGT() hook 就是典型例子。

我们专门为“棕地”应用构建的唯一基础设施，是 const t = useTranslations() 和 const t = getTranslations() hooks，它们借鉴了 next-intl 的字典模式。不过，我们的 t() 函数一直存在局限：只能返回字符串，不能返回字典子树。

我们发现，开发者通常期望 i18n 库返回字典子树，而不只是字符串。因此，当开发者从其他 i18n 库迁移过来时，gt-next 支持这一能力就变得至关重要。

用法

假设有如下字典结构，其中包含一个你想要遍历的项目列表：

{
  "cards": [
    {
      "title": "Card 1",
      "description": "Card 1 description"
    },
    {
      "title": "Card 2",
      "description": "Card 2 description"
    },
    {
      "title": "Card 3",
      "description": "Card 3 description"
    }
  ]
}

按照我们之前的方法，你需要使用每个条目的准确键名分别访问它们：

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

这种方法显然既不具备可扩展性，也难以维护。

新的 t.obj() 函数提供了一种强大方式，可将字典结构作为子树进行访问：

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

结论

t.obj() 函数是让 gt-next 在绿地和棕地应用中都更灵活易用的重要一步。开发者现在可以直接处理字典子树，从而消除了现有应用在国际化过程中一个主要的痛点。

这项增强让 gt-next 更接近团队对现代 i18n 库所期待的开发体验，也让遍历已翻译内容以及构建更动态、更易维护的国际化应用变得更加容易。