How to translate dynamically properties of an array of objects with i18n?

当面对需要实现i18n（国际化）动态转换对象数组属性的问题时，通常的方法是结合使用前端的国际化库（如react-intl、i18next等）以及后端提供的多语言支持。这里我们可以通过一个具体的例子来详细讲解整个过程。

假设场景

假设我们有一个电商平台，后端返回一个产品列表，每个产品对象包含有多个属性，其中有些属性需要根据用户的语言偏好显示不同的语言。例如，对象数组中的每个对象可能长这样：

json
[
  {
    "id": 1,
    "name": "Laptop",
    "description": "High performance laptop",
    "price": "1000 USD"
  },
  {
    "id": 2,
    "name": "Mouse",
    "description": "Wireless mouse",
    "price": "20 USD"
  }
]

解决方案步骤

步骤 1: 设计后端数据结构

后端应该提供能够支持多语言的数据结构。一种方法是，每个需要翻译的字段都可以存储多个版本，例如：

json
[
  {
    "id": 1,
    "name": {
      "en": "Laptop",
      "zh": "笔记本电脑"
    },
    "description": {
      "en": "High performance laptop",
      "zh": "高性能笔记本电脑"
    },
    "price": "1000 USD"
  },
  {
    "id": 2,
    "name": {
      "en": "Mouse",
      "zh": "鼠标"
    },
    "description": {
      "en": "Wireless mouse",
      "zh": "无线鼠标"
    },
    "price": "20 USD"
  }
]

步骤 2: 前端国际化处理

在前端，假设使用React和react-intl进行国际化处理：

1. 配置国际化库：首先需要在项目中配置国际化库，包括所需的语言包和Provider等。

2. 数据渲染：在渲染组件时，根据用户的语言设置动态选择属性值。

   jsx
   import { useIntl } from 'react-intl';
   
   function ProductList({ products }) {
     const intl = useIntl();
     const currentLocale = intl.locale;  // 获取当前语言设置
   
     return (
       <div>
         {products.map(product => (
           <div key={product.id}>
             <h2>{product.name[currentLocale]}</h2>
             <p>{product.description[currentLocale]}</p>
             <p>{product.price}</p>
           </div>
         ))}
       </div>
     );
   }

步骤 3: 测试和验证

在实施后，需要进行多语言环境下的测试，确保所有语言都能正确显示，并且没有遗漏或者错误的翻译。

结论

通过以上步骤，我们可以实现一个灵活的多语言产品列表显示，后端负责提供多语言数据，前端负责根据用户设置动态显示相应语言。这种方法的优点是维护方便且能快速适应新的语言需求，但需要注意数据结构的设计和前端性能的优化。