App Fabric是否支持非组件场景下的直接数据翻译？已了解React Intl

你提到的App Fabric本身没有内置通用的前端业务数据翻译能力，针对你的需求，不需要依赖React Intl相关能力，只需要自行封装全局单例翻译工具即可实现，具体方案如下：

方案实现步骤 #

1. 封装全局翻译工具 #

不需要依赖任何React相关库，仅用原生JS实现全局单例，初始化一次后即可在任意位置调用：

// src/utils/i18n.js 全局翻译工具
let currentLocale = 'zh-CN'
// 存储所有语言包映射
let allMessages = {}

// 初始化方法，应用启动时仅需调用一次
export const initI18n = (defaultLocale, messagesMap) => {
  currentLocale = defaultLocale
  allMessages = messagesMap
}

// 切换locale方法，动态切换语言时调用
export const changeLocale = (newLocale) => {
  currentLocale = newLocale
  // 可自行加回调通知需要更新翻译的模块
}

// 全局通用翻译方法，任意组件/非组件代码都可直接调用
export const t = (key) => {
  return allMessages[currentLocale]?.[key] || key
}

2. 应用启动时初始化翻译工具 #

在应用入口（如index.js）完成初始化，后续无需再手动传入locale和messages参数：

// src/index.js
import { initI18n } from './utils/i18n'
// 导入各语言包
import zhCN from './locales/zh-CN.json'
import enUS from './locales/en-US.json'

// 可根据localStorage、浏览器语言、用户配置等获取当前locale
const userLocale = localStorage.getItem('user_locale') || 'zh-CN'
// 初始化全局翻译工具
initI18n(userLocale, {
  'zh-CN': zhCN,
  'en-US': enUS
})

3. 业务代码中直接使用 #

你提供的非组件接口请求代码中，直接引入t方法即可完成翻译，不需要额外传参：

import { t } from '../utils/i18n'

export function func () { 
  client.get(url, {}).then(response => { 
    // 错误处理逻辑
  }).then(data => { 
    // 直接对接口返回的data字段做翻译
    const translatedData = {
      ...data,
      // 按需翻译对应字段即可
      name: t(data.name),
      description: t(data.description)
    }
    // 翻译完成后直接存入state即可
    yourStateSetter(translatedData)
  })
  // 其余业务逻辑
}

补充说明 #

如果你使用的是微软Dataverse相关的App Fabric能力，它本身支持多语言数据存储，你只需要在请求接口的请求头中添加Accept-Language参数，值为当前的locale标识，接口会直接返回对应语言的翻译结果，无需前端自行处理翻译逻辑。

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