JSON.JS后端的React动态站点多语言适配i18n方案咨询

方案1：动态内容纳入i18next静态资源管理（无需后端改动） #

适合内容固定、不需要后台频繁修改的场景，比如你当前的简历类内容。
你不需要单独导入不同语言的JSON文件，直接把所有语言的对应内容放到i18next的翻译资源文件中即可，i18next支持返回数组/对象类型的翻译内容：

1. 在i18n翻译资源中新增resume命名空间，英文翻译文件示例：

{
  "objectiveList": [
    {
      "name": "你的名字",
      "jobTitle": "职位名称",
      "objective": "个人介绍内容"
    }
  ]
}

丹麦语翻译文件对应字段填写丹麦语内容即可。
2. 调整Objective组件代码：

import React from 'react';
import ObjectiveCard from './ObjectiveCard';
import { useTranslation } from 'react-i18next';

const Objective = () => {
  const { t } = useTranslation('resume'); // 调用resume命名空间的翻译资源
  const objectiveList = t('objectiveList', { returnObjects: true }); // 直接获取数组类型的翻译内容

  return (
    <div>
      {objectiveList.map((o, index) => (
        <ObjectiveCard
          key={index}
          myName={o.name}
          jobTitle={o.jobTitle}
          objective={o.objective}
        />
      ))}
    </div>
  )
}

export default Objective;

ObjectiveCard组件无需做任何改动，i18next切换语言时会自动更新翻译内容，无需额外处理。

方案2：后端适配多语言返回（适合动态可配置内容） #

如果你的站点内容需要后台频繁更新，可让后端接口支持按语言返回对应数据，前端仅需要在请求时携带当前语言标识即可：

1. 后端调整接口逻辑，根据请求携带的lang参数返回对应语言的内容。
2. 调整Objective组件的请求逻辑：

import React, {useEffect, useState} from 'react';
import ObjectiveCard from './ObjectiveCard';
import axios from 'axios';
import { useTranslation } from 'react-i18next';

const Objective = () => {
  const [objective, setObjective] = useState(null)
  const { i18n } = useTranslation();

  useEffect(() => {
    // 请求时携带当前语言参数
    axios.get('http://localhost:9000/objective', {
      params: {
        lang: i18n.language
      }
    })
    .then(response => setObjective(response.data))
  }, [i18n.language]) // 语言切换时自动重新请求对应语言的数据

  return (
    <div>
      {objective && objective.map((o, index) => {
        return(
          <ObjectiveCard
            key={index}
            myName={o.name}
            jobTitle={o.jobTitle}
            objective={o.objective}
          />
        )
      })}
    </div>
  )
}

export default Objective;

ObjectiveCard组件无需做任何改动。

内容的提问来源于stack exchange，提问作者Amjad