如何在函数组件外部使用react-intl的intl实现多语言翻译

useIntl是React Hook，仅支持在函数组件、自定义Hook的顶层作用域调用，在模块顶层直接调用属于违反Hook调用规则，无法正常执行。

方案1：延迟翻译到组件内部（更推荐） #

不需要在模块顶层完成翻译，调整常量结构存储翻译ID，在组件调用时再执行翻译，天然适配react-intl响应式逻辑，切换语言时会自动更新翻译内容，无需额外适配。
常量配置代码：

export const MTM = [
  {
    value: 1,
    labelId: 'TEXT.120'
  }
]

业务组件调用代码：

import { useIntl } from 'react-intl';
import { MTM } from './config';

const BusinessComponent = () => {
  const intl = useIntl();
  // 渲染前实时翻译
  const translatedMTM = MTM.map(item => ({
    ...item,
    label: intl.formatMessage({id: item.labelId})
  }))

  // 后续直接使用translatedMTM渲染即可
  return <></>
}

方案2：创建全局intl实例 #

如果必须在非React上下文、模块顶层直接得到翻译后的内容，可以通过createIntl方法创建全局可调用的intl实例。
第一步，单独抽离全局intl实例配置文件：

// src/i18n/index.js
import { createIntl, createIntlCache } from '@formatjs/intl';
// 引入对应语言包
import zh from './locales/zh.json';
import en from './locales/en.json';
import pt from './locales/pt.json';

const cache = createIntlCache();
// 可根据实际场景动态获取当前选中的语言，比如从localStorage、状态管理中取
const currentLocale = localStorage.getItem('locale') || 'zh';
const messages = {
  zh,
  en,
  pt
}[currentLocale];

export const intl = createIntl({
  locale: currentLocale,
  messages: messages
}, cache);

第二步，在常量配置文件直接引入全局实例使用：

import { intl } from 'src/i18n/index';

export const MTM = [
  {
    value: 1,
    label: intl.formatMessage({id: 'TEXT.120'})
  }
]

注意：该方案下切换语言时需要手动更新全局intl实例配置，同时触发用到常量的组件重新渲染才能生效。

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