是否可以从IntlProvider重用`intl`上下文？

Question

我有一个组件（弹出窗口），它在树外（也就是门户网站）呈现，因此失去了IntlProvider的上下文：

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

Redux通过允许将商店实例作为组件的支柱来解决同样的问题：

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钩子也很好:)