能否复用ReactIntl的IntlProvider上下文？Portal弹窗场景求解决方案

当然可以复用 React Intl 里 IntlProvider 的上下文！而且针对你提到的 Portal 弹窗跳出组件树丢失上下文的场景，确实有和 Redux 传递 store 类似的解决方案，下面给你详细说几种实用的方式：

1. 直接传递 intl 实例作为 props #

这完全对应你说的 Redux 传 store 的思路——先通过 useIntl 钩子拿到当前上下文里的 intl 实例，再把它作为 props 传给 Portal 弹窗组件就行。

示例代码：

import { useIntl } from 'react-intl';

const App = () => {
  const intl = useIntl();
  
  return (
    <>
      {/* 你的其他应用组件 */}
      <Popup intl={intl} />
    </>
  );
};

在弹窗组件里，直接用传入的 intl 实例调用格式化方法就好，不用再依赖上下文：

const Popup = ({ intl }) => {
  return (
    <Portal>
      <div>{intl.formatMessage({ id: 'popup.title' })}</div>
    </Portal>
  );
};

2. 在 Portal 内部嵌套小型 IntlProvider #

如果弹窗内部有多个子组件都需要用国际化能力，不想挨个传 props，那可以在 Portal 内部重新套一个 IntlProvider，把当前的 locale、messages 等配置传进去，这样弹窗里的所有子组件都能通过上下文访问到 intl 了。

示例代码：

import { useIntl, IntlProvider } from 'react-intl';

const App = () => {
  const intl = useIntl();
  
  return (
    <>
      {/* 你的其他应用组件 */}
      <Popup 
        locale={intl.locale}
        messages={intl.messages}
      />
    </>
  );
};

const Popup = ({ locale, messages }) => {
  return (
    <Portal>
      <IntlProvider locale={locale} messages={messages}>
        {/* 弹窗内部的所有组件都能正常使用 useIntl 或 FormattedMessage 组件了 */}
        <PopupHeader />
        <PopupBody />
      </IntlProvider>
    </Portal>
  );
};

3. 创建全局独立的 intl 实例 #

如果你项目里的国际化配置是全局统一的，还可以提前用 createIntl 方法创建一个全局的 intl 实例，就像 Redux 的全局 store 一样，在任何地方（包括 Portal 弹窗）直接导入使用就行。

示例代码：

// 新建全局 intl 实例文件：src/utils/intl.js
import { createIntl } from '@formatjs/intl';

// 这里可以根据实际需求动态切换 locale 和 messages
export const globalIntl = createIntl({
  locale: 'en',
  messages: require('../locales/en.json'),
});

然后在弹窗组件里直接导入使用：

import { globalIntl } from '../utils/intl';

const Popup = () => {
  return (
    <Portal>
      <div>{globalIntl.formatMessage({ id: 'popup.title' })}</div>
    </Portal>
  );
};

这几种方法各有适用场景：第一种最直接，和你熟悉的 Redux 传 store 逻辑一致；第二种适合弹窗内部组件较多的情况；第三种适合全局统一管理国际化配置的项目，你可以根据自己的需求选择~

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