是否可以从 IntlProvider 重用“intl”上下文？答案

【问题标题】：Is it possible to reuse `intl` context from IntlProvider?是否可以从 IntlProvider 重用“intl”上下文？
【发布时间】：2018-01-29 13:39:16
【问题描述】：

我有一个在树（又名门户）之外呈现的组件（弹出窗口），因此丢失了IntlProvider 的上下文：

<IntlProvider locale="en">
    <App />
</IntlProvider>
// * <- renders here

Redux 通过允许将 store 实例作为组件的 prop 传递来解决同样的问题：

import store from "./store";

const Component = () => <Popup store={store} />;

我可以为 ReactIntl 使用类似的方法吗？

【问题讨论】：

【解决方案1】：

您可以使用injectIntl HOC 将intl 注入到您的组件中。

只需更改您的代码：

const Component = () => <Popup ... />

到：

import { injectIntl  } from 'react-intl';
const Component = ({ intl }) => <Popup intl={intl} />
export default injectIntl(Component)

【讨论】：

【解决方案2】：

如果你不想将你的组件包装到 HOC 中，useIntl hook 也不错:)

【讨论】：