javascript - 是否可以从 IntlProvider 重用“intl”上下文？

Question

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

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

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

import store from "./store";

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

有没有类似的方法可以用于 ReactIntl​​？

Answer 1

您可以将injectIntl​​ HOC 与注入intl组件一起使用。

只需将您的代码更改为：

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

至：

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

Answer 2

如果您不想将组件包装到 HOC 中，useIntl 钩子也很好:)